I'm trying to get the background colour of .skin-1 and .roll-1 to change colour when the mouse rolls over .roll-1, I believe I've got issues with my css selector targeting. I'm using .roll-1:hover ~ .skin-1{background: #ed008c;} to change both and this worked before I put the li's in separate ul's
Can someone let me know what i'm doing wrong.
<style>
.catlevel ul {list-style: none;}
.catlevel ul li{float: left;}
.catlevel ul li img{padding:10px;}
.catlevel li a {display: block;}
.mypad{margin:0 12px 10px 0;}
.endpad{margin:0 0 10px 0;}
.rollpad{margin: 0 10px 0 0;}
.dock-menu {width: 100%;padding: 0;margin: 0;text-align: center;font-size: 0;}
.dock-menu-list {display: inline-block;padding: 0;list-style: none;}
.dock-menu-list li {display: inline-block;margin: 0;padding: 0;min-width: 75px;min-height: 75px;}
.dock-menu-list li img {display: inline-block;cursor: pointer;padding:10px}
.roll-1, .skin-1 {background: #baa3d3;-webkit-box-shadow: 0 0 3px rgba(153,153,153,0.25);box-shadow: 0 0 3px rgba(153,153,153,0.25);transition: background 1s;-webkit-transition: background 1s;}
.roll-1:hover {background: #ed008c;}
.roll-1:hover ~ .skin-1{background: #ed008c;}
</style>
<div id="mContainer">
<div id="categorylist">
<div id="catgoldspot"></div>
<div id="catgoldspot"></div>
<div class="catlevel">
<div class="dock-menu">
<ul class="dock-menu-list">
<li class="roll-1 rollpad"><a href="#"><img src="main.jpg" /></a></li>
</ul>
</div>
</div>
<div class="catlevel">
<ul class="nopad">
<li class="skin-1 mypad"><a href="#"><img src="test.jpg" /></a></li>
</ul>
</div>
</div>
</div>
.roll-1:hover ~ .skin-1{background: #ed008c;} // Here you select on hover all roll-1 that contains slin-1
From your html here are no roll-1 that contains skin-1.
Source : http://www.w3schools.com/cssref/css_selectors.asp
As solution i can suggest use jquery script :
$('.roll-1').hover(function(){
$('.skin-1').css('background', '#ed008c');
}, function(){
$('.skin-1').css('background', '#baa3d3');
});
Example : http://jsfiddle.net/p0y49hk9/1/
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments