CSS Hover on a div to show another div not working

Question

I'm trying to change the opacity of a div when I hover on another div, but it isn't working at all. Here's the HTML:

.chatdate {
  padding-top: 10px;
  opacity: 0.5;
  transition: opacity 1s ease-in-out;
}

.workstream-comment:hover .chatdate {
  background: red;
  opacity: 1;
}

<div class="col-lg-12">
  <div class="row">
    <div class="col-lg-10">
      <div class="workstream-comment">
        ...
      </div>
    </div>
    <div class="col-lg-2">
      <div class="chatdate text-center">
        <h6>15/07/2017</h6>
        <br>
        <h1>11:07</h1>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-10">
      <div class="workstream-comment">
        ...
      </div>
    </div>
    <div class="col-lg-2">
      <div class="chatdate text-center">
        <h6>15/07/2017</h6>
        <br>
        <h1>11:07</h1>
      </div>
    </div>
  </div>
</div>

Can anyone tell me what I'm doing wrong? Thanks

The chatdate div is not inside the workstream-comment div, so the selector doesn't work. What you need is something like .row > .col-lg-10:hover + .col-lg-2 > .chatdate — Mr Lister
– Mr Lister, Commented Jul 6, 2017 at 10:54
that's not how you target .chatdate when workstream is hovered - you're going to want to take a look into js or jQuery to do this (IMO) — treyBake
– treyBake, Commented Jul 6, 2017 at 10:56
Thanks @MrLister, that was exactly what I was looking for :) — joao-m-santos
– joao-m-santos, Commented Jul 6, 2017 at 11:24

Nirav Joshi · Accepted Answer · 2017-07-06 11:04:53Z

You can achieve it via jquery

Check this code. Hope it will helps You. :)

$('.workstream-comment').mouseover(function(){
  $(this).parent().next().find(".chatdate").css("opacity","1");
});
$('.workstream-comment').mouseout(function(){
  $(this).parent().next().find(".chatdate").css("opacity","0.5");
});

.chatdate {
    padding-top: 10px;
    opacity: 0.5;
    transition: opacity 1s ease-in-out;
}

.workstream-comment:hover .chatdate {
    background: red;
    opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-12">
                <div class="row">
                    <div class="col-lg-10">
                        <div class="workstream-comment">
                            ...
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <div class="chatdate text-center">
                            <h6>15/07/2017</h6>
                            <br>
                            <h1>11:07</h1>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-10">
                        <div class="workstream-comment">
                            ...
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <div class="chatdate text-center">
                            <h6>15/07/2017</h6>
                            <br>
                            <h1>11:07</h1>
                        </div>
                    </div>
                </div>
            </div>

ABCrafty · Accepted Answer · 2017-07-06 11:34:57Z

1

Nirav Joshi's answer is great ! I would add an explanation to why your code wouldn't work. What you're saying in your css is that the .chatdate class is a child inside the .workstream-comment, so it is normal this won't work this way, because when you hover the .workstream-comment class content it's looking for .chatdate div inside the .workstream-comment div. That's why you should use some javascript to handle it :)

answered Jul 6, 2017 at 11:34

ABCrafty

2781 gold badge4 silver badges16 bronze badges

Comments

V.David · Accepted Answer · 2017-07-06 10:59:04Z

0

Why not a javascript function? I dont think you can succeed using only css.

$('.workstream-comment').hover(function(){
          $('.chatdate').css("background", "red");
          $('.chatdate').css("opacity", "1");
        }
    )

(I did not test it btw)

answered Jul 6, 2017 at 10:59

V.David

7512 bronze badges

Comments

joao-m-santos · Accepted Answer · 2017-07-31 12:44:35Z

0

Answering with @MrLister's comment, as it worked for me and was the pure CSS answer:

The chatdate div is not inside the workstream-comment div, so the selector doesn't work. What you need is something like

.row > .col-lg-10:hover + .col-lg-2 > .chatdate

Thanks for all the answers

answered Jul 31, 2017 at 12:44

joao-m-santos

1871 gold badge2 silver badges14 bronze badges

Collectives™ on Stack Overflow

CSS Hover on a div to show another div not working

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related