I want a image inside a list and a anchor tag to change on hover with css
-
12-11-2019 - |
Question
I am trying to put a background to a empty anchor tag, but nothing will show up unless i place text there. What is the best approach to having a image in a list item and change it to another image on hover with css.
html
<ul>
<li><a class="nav1" href="http://localhost:8888/fiftyfity/?page_id=2"></a></li>
</ul>
css
ul li a.nav1{
background-image: url("../images/nav1.gif");
width:161px;
height: 49px;
}
ul li a.nav1:hover{
background-image: url("../images/navB1.gif");
width:100px;
height: 20px;
}
Solution
Anchor links are inline elements by default, so applying a width and height won't work. You can make them block elements with CSS:
ul li a.nav1 {
display: block;
}
More info: http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
OTHER TIPS
I needed to change the anchor tag into a block level element. It all works now
ul li a.nav1{
display:block;
background-image: url("../images/nav1.gif");
width:161px;
height: 49px;
}
ul li a.nav1:hover{
display:block;
background-image: url("../images/navB1.gif");
width:100px;
height: 20px;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow