Display DIV on hover over another DIV

Question

I've found the solution I am looking for on SoF but the issue persists. I'm obviously not doing something correctly. Perhaps another pair of eyes would be helpful.

Basically, I want to show a hidden div while I hover over a separate div. While on hover over the separate div, it will change bg color.

Thanks for the help.

Here is a CodePen of what I have so far.

HTML

<div class="container-fluid">
  <div class="image">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
  </div>
  <div class="one-text">
    <p>Here is some text</p>
  </div>
  <div class="two-text">
    <p>Here is some text</p>
  </div>
  <div class="three-text">
    <p>Here is some text</p>
  </div>
  <div class="four-text">
    <p>Here is some text</p>
  </div>
  <div class="five-text">
    <p>Here is some text</p>
  </div>
</div>

CSS

body {
  background-color: #c5d5cb;
  color: #fff;
  font-family: Open Sans;
  font-weight: 300;
  margin: 0 auto;
}

.container-fluid {
  background-color: #9fa8a3;
  height: 600px;
  padding: 30px;
}
.container-fluid .image {
  background-color: #e3e0cf;
  height: 100%;
  width: 50%;
  float: right;
  padding: 30px;
  display: flex;
  justify-content: space-between;
}
.container-fluid .image .one {
  background-color: #c5d5cb;
  width: 100px;
  height: 100px;
  margin: 5px;
}
.container-fluid .image .one:hover {
  background-color: #3b3a36;
}
.container-fluid .image .two {
  background-color: #c5d5cb;
  width: 100px;
  height: 100px;
  margin: 5px;
}
.container-fluid .image .two:hover {
  background-color: #3b3a36;
}
.container-fluid .image .three {
  background-color: #c5d5cb;
  width: 100px;
  height: 100px;
  margin: 5px;
}
.container-fluid .image .three:hover {
  background-color: #3b3a36;
}
.container-fluid .image .four {
  background-color: #c5d5cb;
  width: 100px;
  height: 100px;
  margin: 5px;
}
.container-fluid .image .four:hover {
  background-color: #3b3a36;
}
.container-fluid .image .five {
  background-color: #c5d5cb;
  width: 100px;
  height: 100px;
  margin: 5px;
}
.container-fluid .image .five:hover {
  background-color: #3b3a36;
}
.container-fluid .one-text {
  width: 300px;
  display: block;
  float: right;
  display: none;
}
.container-fluid .two-text {
  width: 300px;
  display: block;
  float: right;
  display: none;
}
.container-fluid .three-text {
  width: 300px;
  display: block;
  float: right;
  display: none;
}
.container-fluid .four-text {
  width: 300px;
  display: block;
  float: right;
  display: none;
}
.container-fluid .five-text {
  width: 300px;
  display: block;
  float: right;
  display: none;
}
.container-fluid .one:hover + .one-text {
  display: block;
}
.container-fluid .two:hover + .two-text {
  display: block;
}
.container-fluid .three:hover + .three-text {
  display: block;
}
.container-fluid .four:hover + .four-text {
  display: block;
}
.container-fluid .five:hover + .five-text {
  display: block;
}

The problem is that, for example, `.one` and `.one-text` are not sibling elements, hence the "+" selector will not work in this context. A possible solution would involve rearranging the HTML or else using JavaScript/jQuery. Please advise what options that you are willing to consider. — Marc Audet, Oct 20 '16 at 14:41
Thanks for the response. I see what you mean. But, could you tell me why if I replace .one:hover with .image:hover on line 81 the text will display as I intended? Is it because .image and .one-text are both siblings of the .container div? — dooge, Oct 20 '16 at 14:49
quick, which hovered div should target which div? There are some unique rules to that, if all else fails, JS wil do, tell me which action you wan tto happen — damiano celent, Oct 20 '16 at 14:52
@damianocelent So, the smaller rectangles on hover should change color and also reveal text that is outside and floated left of the larger yellow rectangle. Change one of the text divs from display none and you will see them — dooge, Oct 20 '16 at 14:55
Working on this, no worries, this gionna be good.but with JS:-) Gimme couple minutes — damiano celent, Oct 20 '16 at 15:05
@damianocelent It doesn't really matter. The color is there just to see the effect in action as a placeholder. — dooge, Oct 20 '16 at 15:13
@dooge, the text is in the right place yeah? When mouse leaves the div, the text should be hidden again, ok? — damiano celent, Oct 20 '16 at 15:22
Please check this link:-http://stackoverflow.com/questions/19062120/make-a-div-appear-on-hover-over-another-div — Razia sultana, Oct 20 '16 at 15:52

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

Ok I have done this with JS, simply because it would have been too much a hassle with CSS, also, I doubt it's possible in CSS. I will post the CSS rules later on.

I have done it in plain vanilla JS, it will work in all modern browsers.

First I have added a slight transition to everything, instead of display none on the paragraphs i have done:

webkit-transition:.4s;
transition:.4s;
opacity:0;

Then I have created a mouseIn and mouse Out function, with 3 parameters.

function onEntry(whichDiv,whichText, color) {
whichDiv.style.background = color;
whichText.style.opacity = '1';
}

Then, I had to add an EventListener to all divs:

one.addEventListener('mouseover', function(){
onEntry(one, txtOne, "#3b3a36");
}

See, that 3rd parameter, you can change to your desired colors.

Here is the link to the pen:

http://codepen.io/damianocel/pen/vXQqJE

And on the CSS rules to affect other elements on hover, it goes like:

directly inside the container:

container:hover > #element

If cube is next to (after containers closing tag) the container:

container:hover + #element

If the cube is somewhere inside the container:

container:hover #cube

Cheers

You are welcome, the only thing I am trying to figure out is, what if you had 100s of divs and paragraphs, how would I add Listeners to all of them, I will see if it can be done with looping. — damiano celent, Oct 20 '16 at 16:33

score 0 · Answer 2 · answered Oct 20 '16 at 15:51

0

Try it

#content:hover #hoverbar{
    visibility:visible;
}

answered Oct 20 '16 at 15:51

Razia sultana

2,168
3
15
20

While this code snippet may solve the question, [including an explanation](http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – andreas Oct 20 '16 at 18:22

Display DIV on hover over another DIV

2 Answers2

container:hover > #element

container:hover + #element

container:hover #cube