CODEWITHSUNDEEP
htmlcss
Derek Clark
Derek Clark

Reputation: 219

Link styles for hover

I am working on some side buttons for a project and would like the link the hover styles for both elements, but am not sure how to go about this. In the example below if I highlight the link name (search) it rolls over and changes to a red text and if I highlight the image, it changes to the rollover image as expected. However what I would like to achieve is to link both so when I hover over the icon the link changes to red as well and vice versa.

#linkchoice{
    width:100px;
    height:100px;
  }
#image{
    height:75px;
    background-image:url(https://i.postimg.cc/P5nvVtPt/search-icon.png);
    background-repeat:no-repeat;
    background-size:75px 75px;
    background-position:center;
  }	
#linkname{
    font-size:15px;
    text-align:center;
  }	
#image:hover{
    background-image:url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
  }	
#linkname:hover{
    color:#EB0307;
  }
<div id='linkchoice'>
    <div id='image'></div>
    <div id='linkname'>Search</div>
</div>

I have made a JSFiddle as well here

https://jsfiddle.net/bzsvgwp8/

Thanks

Upvotes: 0

Views: 155

Answers (2)

DaFois
DaFois

Reputation: 2223

The first solution could be to use the hover on the parent div:

#linkchoice {
    width:100px;
    height:100px;
  }
#image{
    height:75px;
    background-image:url(https://i.postimg.cc/P5nvVtPt/search-icon.png);
    background-repeat:no-repeat;
    background-size:75px 75px;
    background-position:center;
  }	
#linkname{
    font-size:15px;
    text-align:center;
  }	
#linkchoice:hover #image {
    background-image:url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
  }	
#linkchoice:hover #linkname {
    color:#EB0307;
  }
<div id='linkchoice'>
    <div id='image'></div>
    <div id='linkname'>Search</div>
</div>

in the second solution you can simplify the html using a single div, in this way:

#linkchoice{
    width:100px;
    height:100px;
  }
#linkname{
    height:75px;
    background-image:url(https://i.postimg.cc/P5nvVtPt/search-icon.png);
    background-repeat:no-repeat;
    background-size:75px 75px;
    background-position:top;
    padding-top:75px;
    font-size:15px;
    text-align:center;
  }	
#linkname:hover{
    background-image:url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
    color:#EB0307;
  }
<div id='linkchoice'>
    <div id='linkname'>Search</div>
</div>

Upvotes: 0

Md. Monirul Alom
Md. Monirul Alom

Reputation: 285

Just update your css from 

#image:hover {
  background-image: url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
}

#linkname:hover {
  color: #EB0307;
}

to 

#linkchoice:hover #image {
  background-image: url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
}

#linkchoice:hover #linkname {
  color: #EB0307;
}

You will see the combined hover effect !

Upvotes: 1

Related Questions