ok , i have a list with an image when i hover the a `
` it changes color gray to black, also when i hover the image it change border color, the problem is that when i want to hover the image also the `
` get the hover effect , any one that could help me ?
here is the code
.circle-list span{
position: relative;
display: block;
*padding: .4em;
margin: .5em 0 .5em 2.5em;
color: rgb(134, 130, 130);
text-decoration: none;
transition: all .3s ease-out;
}
.circle-list span:before{
content: “”;
position: absolute;
left: -3.5em;
top: 50%;
margin-top: -1em;
background: rgb(65, 191, 223);
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
border-radius:50%;
}
.circle-list span:after{
position: absolute;
content: ”;
border: .5em solid transparent;
left: -1em;
top: 50%;
margin-top: -.5em;
transition: all .3s ease-out;
}
.circle-list span:hover:after{
left: -1.2em;
border-left-color: #fa8072;
}
.circle-list span:hover{
color:black;
}
and
image code
.imageFeatures {
float: right;
width: 150px;
height: 150px;
margin-left: 1.5em;
border: 5px solid #fff;
overflow: hidden;
background-color: rgb(255,255,255);
-webkit-box-shadow: 0 0 5px 2px #aaa;
-moz-box-shadow: 0 0 5px 2px #aaa;
box-shadow: 0 0 5px 2px #aaa;
-webkit-transition: border-color 0.5s;
-moz-transition: border-color 0.5s;
-o-transition: border-color 0.5s;
transition: border-color 0.5s;
}
.imageFeatures:hover {
border-color: rgb(64,186,216);
}
.imgFeature {
display: block;
height: 100%;
max-width: 100%;
}
