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

Answer 1

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> 

Answer 2

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 :)

Answer 3

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)

Answer 4

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