Clever Geek Handbook

Html, div, css - hover action and change background image

#logo
{
    position: relative;
    width: 100px;
    height: 18px;
    float: right;

    background-image: url('../images/logo_def.png');
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

#logo a:hover
{
    background-image: url(../images/logo_h.png);
}

This works, but the bg image doesn't change when the mouse is over it, why?

+2


source to share


6 answers


Well, the immediate problem is that #logo

there is no element inside <a>

. Changing your second rule for the target element will "fix" this problem:

#footer a:hover
{
    background-image: url(../images/logo_h.png);
}

Edit:
As noted in the comments:



The first rule style should be applied to the A element and the #logo DIV should be removed as it serves no purpose.

This is truly the best solution to your problem, as it will reduce the clutter and help prevent further headaches in the future. (thanks @Julian for the clarification)

+4


source


The background image is initially assigned to #logo. With a: hover the background image ANCHOR. So the following will work:



#logo a
{
    position: relative;
    width: 100px;
    height: 18px;
    float: right;

    background-image: url('../images/logo_def.png');
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

#logo a:hover
{
    background-image: url(../images/logo_h.png);
}
+2


source


You have applied the hover image to the element <a>

. There is div#logo

no element inside yours <a>

.

+1


source


You can attach your div to an anchor element and then use a:hover

:

<div id="blah">
<p> <a href="#"></a></p>
</div>

Then your CSS

#blah a:hover {
 background-image: url(myImage.jpg);
}
0


source


It should be noted that you should not place block-level elements in an anchor, which is an inline element that you can set to display a block. The correct hierarchy should be something like div#footer > a > span#logo

with the appropriate css.

0


source


Isn't it easier to use javascript functions onMouseOver and onMouseOut?

<script type="text/javascript">
function divcolor(){ document.getElementById('div1').style.background='#FFDFA3'; }
function divcolor2(){ document.getElementById('div1').style.background='#FFFFFF'; }
</script>

<div id="div1" onmouseover="divcolor();" onmouseout="divcolor2();">Hover ME and I will highlight for you :)</div>

I used background colors, but the same should work with images.

0


source






More articles:


All Articles