Question

我希望在悬停其父div时更改div的CSS。

这是我的HTML：

<div id="box1" class="hover-on-div-1">
    <img src="images/1.png" alt="" />
    <div id="line1"></div>
    <div class="text_align"><span>Text here</span>
    </div>
</div>

这是CSS：

#box1 {
    height: 295px;
    width: 220px;
    background-color: #86d1f4;
    float: left;
    margin-left: 30px;
    margin-right: 120px;
    margin-top: 55px;
    color: #0081C5;
}

#box1:hover {
    background-color: #494c5b;
    color: #BFB6AF;
}

#line1 {
    height:1px;
    background:#0081C5;
    width:126px;
    margin-top:67px;
    margin-left:40px;
    position:absolute;
}

注意：.hover-on-div-1是我用于更改图像的JQuery函数的类，<span>仅用于文本转换，text-align类非常自我说明

当将鼠标悬停在＃box1上时，如何更改.line1 div？

当我悬停时，我设法改变＃box1 div中的所有内容，但不是.line1。做了一些关于SO的搜索，但是因为我对JQuery / JavaScript来说是一个完全的菜鸟，所以它并没有太多帮助。

https://jsfiddle.net/nLg8Lr7x/

Answer 1

你不需要JS - 你的＃line1 div 是＃box1 div 的孩子。只需添加一些这样的CSS：

#box1:hover #line1 {
    /* Changes for #line1 when #box1 hovered */
}

这是examle on jsbin。

Answer 2

如果您想使用jQuery，可以使用mouseover和mouseleave函数来更改css，如下所示。

注意：我建议您使用addClass和removeClass函数，而不是在函数中设置硬编码 css。

$('#box1').mouseover(function() {
   $('#line1').css("background", "red"); // change css
});
$('#box1').mouseleave(function() {
   $('#line1').css("background", "#0081C5"); // change back css as it was
});

$('#box1').mouseover(function() {
  $('#line1').css("background", "red");
});
$('#box1').mouseleave(function() {
  $('#line1').css("background", "#0081C5");
});

    #box1 {

      height: 295px;

      width: 220px;

      background-color: #86d1f4;

      float: left;

      margin-left: 30px;

      margin-right: 120px;

      margin-top: 55px;

      color: #0081C5;

    }

    #box1:hover {

      background-color: #494c5b;

      color: #BFB6AF;

    }

    #line1 {

      height: 1px;

      background: #0081C5;

      width: 126px;

      margin-top: 67px;

      margin-left: 40px;

      position: absolute;

    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box1" class="hover-on-div-1">
  <img src="images/1.png" alt="" />
  <div id="line1"></div>
  <div class="text_align"><span>Text here</span>
  </div>
</div>

在悬停另一个时更改div的CSS（JQuery）

2 个答案: