How to set color on mouse hover - css

Question

I have social bar on my website which indcludes facebook, twitter, google+ and rss.

It looks like this

enter image description here

On mouse hover, i want the circle around image to change color to blue. Somehow i always end up failing and the whole background changes to blue.

MY HTML CODE

<div class="social-top-nav">
    <ul>
        <li><a href="#"><img src="images/facebook.png" title="facebook" /></a></li>
        <li><a href="#"><img src="images/twitter.png" title="twitter" /></a></li>
        <li><a href="#"><img src="images/google.png" title="google+" /></a></li>
        <li><a href="#"><img src="images/feed.png" title="rss" /></a></li>
    </ul>
</div>

My CSS code

.social-top-nav{
    float:right;
    margin-top: 11px;
}

.social-top-nav ul li{
    display:inline-block;
}
.social-top-nav ul li a{
    display:block;
}

.social-top-nav ul li a img:hover{
    opacity: 0.8;
    -moz-box-shadow: 0 0 10px #ccc; 
    -webkit-box-shadow: 0 0 10px #ccc; 
    box-shadow: 0 0 10px #ccc; 
}

Can you guys help me fix the code? I'll appreciate any input.

knitevision

enter image description here

Can you share a Fiddle?

Ganesh Salunkhe
– Ganesh Salunkhe

2015-04-07 11:04:32 +00:00
Commented Apr 7, 2015 at 11:04 — Ganesh Salunkhe
– Ganesh Salunkhe, Commented Apr 7, 2015 at 11:04
create a demo of your stuff

knitevision
– knitevision

2015-04-07 11:11:23 +00:00
Commented Apr 7, 2015 at 11:11 — knitevision
– knitevision, Commented Apr 7, 2015 at 11:11
create a demo. this code is not enough.

knitevision
– knitevision

2015-04-07 11:20:20 +00:00
Commented Apr 7, 2015 at 11:20 — knitevision
– knitevision, Commented Apr 7, 2015 at 11:20

Rod · Accepted Answer · 2015-04-07 11:23:26Z

2

you can't change the color of the circle (since it's part of the image)

but you can :

1 - add a css border circle (and then change the color):

border: 1px solid #ccc;
border-radius: 50%;

2 - try to replace your images with Font Icons

3 - use webkit-filter (this won't solve your problem, I'm posting just in case)

edited Apr 7, 2015 at 11:23

answered Apr 7, 2015 at 11:16

Rod

80412 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Haresh Shyara · Accepted Answer · 2015-04-07 11:13:48Z

0

Try to this css

.social-top-nav:hover {
  color:blue;
 }

answered Apr 7, 2015 at 11:13

Haresh Shyara

1,88611 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to set color on mouse hover - css

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related