CSS Hover auf einem div zu zeigen ein anderes div nicht funktioniert

Question

Ich versuche, die Opazität eines div zu ändern, wenn ich auf einem anderen div schweben, aber es ist gar nicht funktioniert. Hier ist der 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>

mir jemand kann sagen, was ich falsch mache? Dank

Answer 1

Answering mit @ MrLister Kommentar, wie es für mich gearbeitet und war die reine CSS Antwort:

Die chatdate div ist nicht innerhalb des Workstream-Kommentar div, so dass der Selektor nicht funktioniert. Was Sie brauchen, ist so etwas wie

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

Danke für alle Antworten

Answer 2

Warum nicht eine Javascript-Funktion? Ich denke nicht, dass Sie nur mit CSS erfolgreich sein können.

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

(ich habe es nicht btw testen)

Answer 3

Sie es dieser Code

prüfen über jquery erreichen können. Hoffe es wird dir helfen. :)

$('.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 4

Nirav Joshi Antwort ist groß! Ich würde eine Erklärung hinzufügen, warum Ihr Code nicht funktionieren würde. Was Sie in Ihrem CSS sagen, ist, dass die .chatdate-Klasse ein Kind innerhalb des .Workstream-Kommentars ist, also ist es normal, dass dies nicht so funktioniert, weil wenn Sie den .workstream-Kommentar-Klassen-Inhalt, den er sucht, bewegen .chatdate div im .workstream-Kommentar div. Deshalb sollten Sie einige Javascript verwenden, um damit zu umgehen :)