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%; 
}

Это везде работает, за исключением последнего сНу s4. Div s4 становится все больше на зависании, но div s3 не становится меньше. И спасибо за любой ответ.

Я бы поставил jsfilddle, но не мог заставить его работать.

источник

2015-01-26 Akheel K M

Вы не можете с помощью CSS, нет предыдущего селектора родственного. –

Nooo .. Какого черта? !! Итак, как бы я решил это решить? JS ?? –

@AkheelKM вам нужно будет использовать js, возможно, jquery будет самым простым. Если вы принимаете ответы на jquery, вы должны пометить этот вопрос – Huangism

Вы можете использовать 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 наведите указатель мыши на один элемент, измените свойство другого элемента

ответ

Смежные вопросы