在悬停另一个时更改div的CSS(JQuery)

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？

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

https://jsfiddle.net/nLg8Lr7x/

Answer 1

你不需要JS - 你的#line1 div是#box1 div的孩子.只需添加一些这样的CSS:

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

这是关于jsbin的考试.