我知道还有其他问题可以回答这个问题。但我的问题是专门针对我的问题的。
<html>
<body>
<div id="hello">
<div id="s1"></div>
<div id="s2"></div>
<div id="s3"></div>
<div id="s4"></div>
</div>
</body>
<style>
#hello
{
top : 0;
left : 0;
width : 100%;
height : 100%;
/*overflow : hidden;*/
background : #ccc;
}
#s1,#s2,#s3,#s4
{
position: relative;
display : inline-block;
height : 100%;
width : 24.8%;
padding : 0;
margin : 0;
transition : width 0.5s;
}
#s1
{background : red;}
#s2
{background : yellow;}
#s3
{background : blue;}
#s4
{background : green;}
#s1:hover
{width : 28.8%;}
#s1:hover + #s2
{width : 20.8%;}
#s2:hover
{width : 28.8%;}
#s2:hover + #s3
{width : 20.8%;}
#s3:hover
{
width : 28.8%;
}
#s3:hover + #s4
{
width : 20.8%;
}
#s4:hover
{
width : 28.8%;
}
#s4:hover + #s3
{
width : 20.8%;
}
除了最后一个 div s4 之外，它在任何地方都有效。 div s4 在悬停时变大，但 div s3 并没有变小。感谢您的回复。
我本来想设置一个 jsfilddle，但似乎无法让它工作。
最佳答案
您可以使用 jQuery 来执行此操作。
$('.s').hover(function() {
$(this).css('width', '29%');
($(this).index() == $('.s').length - 1) ? $(this).prev().css('width', '21%'): $(this).next().css('width', '21%');
},
function() {
$(this).css('width', '25%');
($(this).index() == $('.s').length - 1) ? $(this).prev().css('width', '25%'): $(this).next().css('width', '25%');
})#hello {
top: 0;
left: 0;
width: 100%;
height: 100%;
/*overflow : hidden;*/
background: #ccc;
}
#s1, #s2, #s3, #s4 {
position: relative;
display: inline-block;
height: 100%;
width: 25%;
padding: 0;
margin: 0;
transition: width 0.5s;
}
#s1 {
background: red;
}
#s2 {
background: yellow;
}
#s3 {
background: blue;
}
#s4 {
background: green;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hello">
<div class="s" id="s1">s1</div
><div class="s" id="s2">s2</div
><div class="s" id="s3">s3</div
><div class="s" id="s4">s4</div>
</div>关于jquery - css 将鼠标悬停在一个元素上更改另一元素的属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28156293/