CSS悬停在一个div上，以显示另一个div不工作

我试图改变一个div的不透明度，当我将鼠标悬停在另一个div上，但它根本不工作。这里的HTML：CSS悬停在一个div上，以显示另一个div不工作

.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>

谁能告诉我什么，我做错了什么？谢谢

来源

2017-07-06 atherir

的chatdate DIV不是工作流程注释DIV里面，所以选择不工作。你需要的东西就像'.row> .col-lg-10：hover + .col-lg-2> .chatdate' –

这不是你在工作流被徘徊时如何定位.chatdate - 你会想要看看js或jQuery做到这一点（国际海事组织） – ThisGuyHasTwoThumbs

感谢@MrLister，那正是我一直在寻找:) – atherir

与@ MrLister的评论回答，因为它的工作对我来说，是纯CSS的答案：

的chatdate DIV不是工作流程注释里面div，所以选择器不起作用。你需要的是像

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

感谢所有的答案

来源

2017-07-31 12:44:35 atherir

为什么不是一个JavaScript函数？我不认为你只能使用CSS成功。

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

（我没有BTW测试）

来源

2017-07-06 10:59:04

您可以通过jQuery

检查这个代码实现它。希望它能帮助你。 :)

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

来源

2017-07-06 11:04:53

Nirav乔希的答案是伟大的！我会添加一个解释为什么你的代码无法工作。你在css中说的是.chatdate类是.workstream注释中的一个子元素，所以这是正常的，这不会以这种方式工作，因为当你将.workstream-comment类内容悬停时，它正在寻找将.workstream-comment div中的.chatdate div。这就是为什么你应该使用一些JavaScript来处理吧:)

来源

2017-07-06 11:34:57 GBCrafty

CSS悬停在一个div上，以显示另一个div不工作

回答

相关问题