css將鼠標懸停在一個元素上更改另一個元素的屬性

我知道還有其他問題可以解答這個問題。但我的問題是專門針對我的問題。css將鼠標懸停在一個元素上更改另一個元素的屬性

<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。 div4在懸停時變大，但div3並沒有變小。謝謝你的回覆。

我會把一個jsfilddle，但似乎無法得到它的工作。

來源

2015-01-26 Akheel K M

你不能用CSS，也沒有以前的兄弟選擇。 – 2015-01-26 18:28:44

Nooo ..到底是什麼？那麼我將如何去解決這個問題？ JS？ – 2015-01-26 18:35:06

@AkheelKM你需要使用js，可能jquery會是最簡單的。如果你接受jQuery的答案，你應該用它來標記這個問題 – Huangism 2015-01-26 18:48:22

你可以使用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>

來源

2015-01-26 18:41:08

css將鼠標懸停在一個元素上更改另一個元素的屬性

回答

相關問題