How to apply a CSS style to div AND the div nested in the div

Question

So, basically I have box on top of some text, and when you hover over it, it will go down, and hide the text:

<div id="box" onmouseover="tran1()" onmouseout="tran2()">
    <p id="par"><b>Hover Me.</b></p>
</div>

<p id="movealong">I will hide!</p>

Here's the script:

function tran1() {
    document.getElementById("par").innerHTML = "<b>Where'd he go?</b>";
}
function tran2() {
    document.getElementById("par").innerHTML = "<b>Hover Me.</b>";
}

And finally the CSS to make it go down:

#box {
    width:100px;
    height:95px;
    border:3px solid #000;
    border-radius: 8px;
    background-color:#06F;
    text-align:center;
}
#box:hover {
    width:100px;
    height:150px;
    border:3px solid #000;
    border-radius: 8px;
    background-color:#066;
}

However, when I hover over the text, the text changes back to "Hover me". How do I call both box and par? Is it the CSS that's the problem or is it the JS?

To get bot - .par and .box element you could set the onmouseover and onmouseout event to the par, and give the element to the function. There you can get the parent element by using .parentNode — Martin P., Dec 05 '16 at 21:20
Use `onmouseleave` instead of `onmouseout`. You can see the difference between the two [here](http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_mouseleave_mouseout). — Alex K, Dec 05 '16 at 21:22

score 0 · Answer 1 · answered Dec 05 '16 at 21:16

Why using JS for the text change instead of anextra class?

function showHidden(el) {
  el.className += " showHidden";
}
function hideHidden(el) {
  el.className = "";
}

.hidden {
  display: none;
  }

div.showHidden p {
    display: none;
  }

div.showHidden p.hidden {
    display: block;
  }

<div onmouseover="showHidden(this)" onmouseout="hideHidden(this)"><p>Hover me</p><p class="hidden">Hide me</p></div>

score 0 · Accepted Answer · answered Dec 05 '16 at 21:27

Not sure if you're interested in a JQuery solution, but this is how simple your problem is solved with it:

var $par = $('#par');
$('#box').hover(function() {
  // On mousein
  $par.html("Where'd he go?");
}, function() {
  // On mouseout
  $par.html('Hover Me.');
});

#box {
  width: 100px;
  height: 95px;
  border: 3px solid #000;
  border-radius: 8px;
  background-color: #06F;
  text-align: center;
}
#box:hover {
  width: 100px;
  height: 150px;
  border: 3px solid #000;
  border-radius: 8px;
  background-color: #066;
}

<div id="box">
  <p id="par"><b>Hover Me.</b></p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

score -1 · Answer 3 · answered Dec 05 '16 at 21:17

Use #box:hover + P#movealong{ to hide the element

function tran1() {
    document.getElementById("par").innerHTML = "<b>Where'd he go?</b>";
}
function tran2() {
    document.getElementById("par").innerHTML = "<b>Hover Me.</b>";
}

#box {
    width:100px;
    height:95px;
    border:3px solid #000;
    border-radius: 8px;
    background-color:#06F;
    text-align:center;
}
#box:hover {
    width:100px;
    height:150px;
    border:3px solid #000;
    border-radius: 8px;
    background-color:#066;
}
#box:hover + P#movealong{
  display:none;
}

<div id="box" onmouseover="tran1()" onmouseout="tran2()">
    <p id="par"><b>Hover Me.</b></p>
</div>

<p id="movealong">I will hide!</p>

How to apply a CSS style to div AND the div nested in the div

3 Answers3