CODEWITHSUNDEEP
htmlcss
ifusion
ifusion

Reputation: 2233

How to change custom icon image on hover of the link next to it?

How do I get a custom icon image to change on hover of the link next to it? Each image will be different for each link obviously. In my case I have two different coloured images one black and then I need it to change to green when you hover on the link next to it. Can this be done with just CSS or do I need to use JS?

Edit: Explained better. When the user hovers over "Link 1" the .home-icon should turn green and when "Link 2" is hovered .tshirt-icon should turn green etc

JS FIDDLE DEMO

HTML:

<ul>
    <li><a href="#"><i class="home-icon"></i>Link 1</a></li>
    <li><a href="#"><i class="tshirt-icon"></i>Link 2</a></li>
</ul>

CSS:

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.home-icon {
    background: url(http://s1.postimg.org/gk5fbl6vv/home_black.png) no-repeat;
    width: 32px;
    height: 32px;
    display: inline-block;
    margin-right: 20px;

    &:hover {
        background: url(http://s2.postimg.org/43870q29h/home_green.png) no-repeat;
    }

}

.tshirt-icon {
    background: url(http://s30.postimg.org/61bqc12fh/tshirt_black.png) no-repeat;
    width: 32px;
    height: 32px;
    display: inline-block;
    margin-right: 20px;

    &:hover {
        background: url(http://s17.postimg.org/3x9qzn8sb/tshirt_green.png) no-repeat;
    }
}

JS FIDDLE DEMO

Upvotes: 2

Views: 3450

Answers (6)

Kotomono
Kotomono

Reputation: 78

Try this one:

html

<ul>
  <li><a id="hoverable" href="#"><i class="home-icon"></i><span class="text">Link 1</span></a></li>
  <li><a id="hoverable" href="#"><i class="tshirt-icon"></i><span class="text">Link 2</span></a></li>
</ul>

css

a {
  color: black;
  text-decoration: none;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.home-icon {
  background: url("http://s1.postimg.org/gk5fbl6vv/home_black.png") no-repeat;
  width: 32px;
  height: 32px;
  display: inline-block;
  margin-right: 20px;
}

a:hover .home-icon {
    background: url("http://s2.postimg.org/43870q29h/home_green.png") no-repeat;
}

.tshirt-icon {
  background: url("http://s30.postimg.org/61bqc12fh/tshirt_black.png") no-repeat;
  width: 32px;
  height: 32px;
  display: inline-block;
  margin-right: 20px;
}

a:hover .tshirt-icon {
  background: url("http://s17.postimg.org/3x9qzn8sb/tshirt_green.png") no-repeat;
}

a#hoverable:hover {
  color: green;
  font-weight: bold;
}

Demo here https://jsfiddle.net/nv4dw8vr/

Upvotes: 0

Suchi Johari
Suchi Johari

Reputation: 109

Use the following code:

HTML:

<ul>
    <li><a class="home-icon1" href="#"><i class="home-icon"></i>Link 1</a></li>
    <li><a class="tshirt-icon1" href="#"><i class="tshirt-icon"></i>Link 2</a></li>
</ul>

CSS:

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.home-icon {
    background: url(http://s1.postimg.org/gk5fbl6vv/home_black.png) no-repeat;
    width: 32px;
    height: 32px;
    display: inline-block;
    margin-right: 20px;

    &:hover {
        background: url(http://s2.postimg.org/43870q29h/home_green.png) no-repeat;
    }
}
.tshirt-icon {
    background: url(http://s30.postimg.org/61bqc12fh/tshirt_black.png) no-repeat;
    width: 32px;
    height: 32px;
    display: inline-block;
    margin-right: 20px;
        &:hover {
        background: url(http://s17.postimg.org/3x9qzn8sb/tshirt_green.png) no-repeat;
    }
}
.home-icon1{
    &:hover {
        .home-icon {
                      background: url(http://s2.postimg.org/43870q29h/home_green.png) no-repeat;
            width: 32px;
    height: 32px;
    display: inline-block;
    margin-right: 20px;
            }
        }
    }
}
.tshirt-icon1{
    &:hover {
        .tshirt-icon {
                      background: url(http://s17.postimg.org/3x9qzn8sb/tshirt_green.png) no-repeat;
               width: 32px;
            height: 32px;
            display: inline-block;
            margin-right: 20px;
            }
        }
    }
}

It will give the required result.

Upvotes: 0

user2340989
user2340989

Reputation: 97

what you are looking for are css selectors: http://www.w3.org/TR/css3-selectors/

E F an F element descendant of an E element

css:

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.icon{
    width: 32px;
    height: 32px;
    display: inline-block;
    margin-right: 20px;
}
.home-icon {
    background: url(http://s1.postimg.org/gk5fbl6vv/home_black.png) no-repeat;
}
.home-icon-link:hover .home-icon{
    background: url(http://s2.postimg.org/43870q29h/home_green.png) no-repeat;
}

.tshirt-icon {
    background: url(http://s30.postimg.org/61bqc12fh/tshirt_black.png) no-repeat;
}
.tshirt-icon-link:hover .tshirt-icon {
    background:url(http://s17.postimg.org/3x9qzn8sb/tshirt_green.png) no-repeat;
}

html:

<ul>
    <li><a class="home-icon-link" href="#"><i class="home-icon icon"></i>Link 1</a></li>
    <li><a class="tshirt-icon-link" href="#"><i class="tshirt-icon icon"></i>Link 2</a></li>
</ul>

Hope it helps, cheers.

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

You need to use a direct descendant selector:

a:hover > i {
    background:green;
}

Because this gets more specificity than others.

Snippet:

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.home-icon {
  background: url("http://s1.postimg.org/gk5fbl6vv/home_black.png") no-repeat;
  width: 32px;
  height: 32px;
  display: inline-block;
  margin-right: 20px;
}

a:hover .home-icon {
    background: url("http://s2.postimg.org/43870q29h/home_green.png") no-repeat;
}

.tshirt-icon {
  background: url("http://s30.postimg.org/61bqc12fh/tshirt_black.png") no-repeat;
  width: 32px;
  height: 32px;
  display: inline-block;
  margin-right: 20px;
}

a:hover .tshirt-icon {
  background: url("http://s17.postimg.org/3x9qzn8sb/tshirt_green.png") no-repeat;
}
<ul>
  <li><a id="link-1" href="#"><i class="home-icon"></i>Link 1</a></li>
  <li><a id="link-2" href="#"><i class="tshirt-icon"></i>Link 2</a></li>
</ul>

Upvotes: 2

divy3993
divy3993

Reputation: 5810

Ya you can try by selecting the immediate sibling of hovered anchor tag using >

DEMO

CSS 

a:hover >  i
{
    background:green;
}

Note: Add this after all code related to your navigation code

Upvotes: 2

gtlambert
gtlambert

Reputation: 11961

This is a suitable solution.

HTML

<ul>
  <li><a id="link-1" href="#"><i class="home-icon"></i>Link 1</a></li>
  <li><a id="link-2" href="#"><i class="tshirt-icon"></i>Link 2</a></li>
</ul>

CSS

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.home-icon {
  background: url(http://s1.postimg.org/gk5fbl6vv/home_black.png) no-repeat;
  width: 32px;
  height: 32px;
  display: inline-block;
  margin-right: 20px;
}

a#link-1:hover .home-icon {
    background: url(http://s2.postimg.org/43870q29h/home_green.png) no-repeat;
}

.tshirt-icon {
  background: url(http://s30.postimg.org/61bqc12fh/tshirt_black.png) no-repeat;
  width: 32px;
  height: 32px;
  display: inline-block;
  margin-right: 20px;
}

a#link-2:hover .tshirt-icon {
  background: url(http://s17.postimg.org/3x9qzn8sb/tshirt_green.png) no-repeat;
}

Upvotes: 1

Related Questions