CODEWITHSUNDEEP
htmlcssmenu
Social Monster
Social Monster

Reputation: 101

Hover background image disappears behind text

With previous help from Stackover, I made a hover menu displaying the days of the week. When you hover over a day, an image appears with text on top. I've got as far as making that. However, now my problem is this: when you mouse over the text, the hover image behind it disappears.

I thought maybe it was an issue that could be fixed using z-index but that didn't work.

I've made a JSfiddle

Here is my CSS 

#nav {
display:inline;
list-style:none;
position:fixed;
width:1290px;
margin:0 auto; 
left:0px; 
right:0px;
float:clear;
top:130px;
z-index:1000;

}

.menu li {
display:inline;
vertical-align:top; 
float:left;

}

.menu li a {
display:block;
height:407px;
width:250px;

}

.img1 {
width:250px;
height:407px;
position:relative;
}

.thursButton {
width:250px;
height:407px;
display:block;
}

#thursButton {
background-image:url('http://static.tumblr.com/2wdsnoc/K8umxhswx/thu.png');
}

#thursButton:hover {
background-image:url('http://static.tumblr.com/2wdsnoc/6Rxmxht1d/thu-hover.png');
}
.left p {
color:#FFFFFF;
display:none;
font-size:20px;
left:5px;
position:absolute;
text-shadow:1px 1px 1px #000000;
text-transform:uppercase;
top:100px;
width:245px;
 white-space: pre-line;
word-wrap: break-word;


}

.left:hover p {
display:block;

}

The HTML 

<div id="nav"> <div style="display:inline-block;white-space: nowrap">
<ul class="menu">
    <li>
        <div class="img1 left"> <a href="#" id="thursButton" class="thursButton" border="0"></a>

            <p><u>Thursday, 19th</u>
Text
<br/>Text
            </p>
        </div>
    </li>
    <li>

            </p>
        </div>
    </li>

Thank you Stackoverflow, as ever!

Upvotes: 0

Views: 2937

Answers (2)

Sander Koedood
Sander Koedood

Reputation: 6337

The problem lies in the stacking of your elements. You put the hover on the a, but when you hover the text, you are no longer hovering the a, which has the background.

Josh's answer works perfectly fine, however, you can also solve it with pointer-events.

Change the following CSS:

.left p {
   color: #FFFFFF;
   display: none;
   font-size: 20px;
   left: 5px;
   position: absolute;
   text-shadow: 1px 1px 1px #000000;
   text-transform: uppercase;
   top: 100px;
   width: 245px;
   white-space: pre-line;
   word-wrap: break-word;
   pointer-events: none;
}

This will cause the p to not have any mouse-events. This makes the hover on the a still work.

Upvotes: 1

Josh Powell
Josh Powell

Reputation: 6297

You need to change what is activating the hover.

I also have seen at least 7-10 of these questions... We are here to help not do the project for you mate.

To explain why this is happening,

You are targeting #thursButton for the hover state which means you have to be hovering over that to make the change. Once you hover over the text you are no longer hovering over #thursButton.

What I did was add the hover state on the parent so where ever you are hovering the parent wil inform the child to make the change.

This is what needs changing,

#thursButton:hover {
    background-image:url('http://static.tumblr.com/2wdsnoc/6Rxmxht1d/thu-hover.png');
}

to,

.img1:hover #thursButton {
    background-image:url('http://static.tumblr.com/2wdsnoc/6Rxmxht1d/thu-hover.png');
}

Here is a JSFIDDLE.

Upvotes: 1

Related Questions