[英]Change CSS of a div when hovering another (JQuery)
悬停其父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完全不了解,所以并没有太大帮助。
为此,您不需要JS-您的#line1 div是#box1 div的子级 。 只需添加一些CSS,如下所示:
#box1:hover #line1 {
/* Changes for #line1 when #box1 hovered */
}
这是jsbin的例子 。
如果要使用jQuery,可以使用mouseover
和mouseleave
函数来更改CSS,如下所示。
注:我建议你使用addClass
与removeClass
功能,而不是在功能设置硬codded 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.