我正在尝试设置这样一个功能:当你悬停在一个元素上时,另一个元素会表现得好像它也被悬停了。
我已经成功地在第一次使用时让它工作了,但之后似乎就失效了。
我的代码:
$(function() {
$('#one').hover(function() {
$('#three').css('box-shadow', '0 0 5px 2px black');
}, function() {
$('#three').css('box-shadow', 'none');
});
});
$(function() {
$('#three').hover(function() {
$('#one').css('box-shadow', '0 0 5px 2px black');
}, function() {
$('one').css('box-shadow', 'none');
});
});
#one, #two, #three {
position: absolute;
height: 100px;
width: 100px;
}
#one {
background-color: orange;
}
#two {
background-color: black;
margin-left: 100px;
}
#three {
background-color: blue;
margin-left: 200px;
}
#one:hover, #two:hover, #three:hover {
box-shadow: 0 0 5px 2px black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
data-group="x"
,并将其用作选择器。这样,您就不必担心哪个标识符也是该组的一部分,并使用CSS类,不要嵌入这样的样式,这样更难以维护和编辑。 - Nope