CODEWITHSUNDEEP
htmlcssgoogle-chrome
svineet
svineet

Reputation: 1889

.class:hover not happening

I have two classes with the following code-

<div class="arrow-left"> <h1> < </h1> </div>
<div class="arrow-right"><h1> > </h1> </div>

Their style -

.arrow-left{
position: fixed;
top:40%;
left:10%;
vertical-align: middle;
height:80%;width:5%;
text-align: center;
}
.arrow-right{
position: fixed;
top:40%;
right:10%;
vertical-align: middle;
height:80%;width:5%;
text-align: center;
}
.arrow-left:hover, .arrow-right:hover{
background-color: #4EB30B;
cursor:pointer;
}

They are used for navigational purposes.
When I hover over the .arrow-left, it's background doesn't change, but the .arrow-right one's background changes when I hover over it. And once I've clicked on .arrow-right , and I hover over over .arrow-left, it's background changes!
This is happening in Chrome on Ubuntu.
Here is the webpage
I want to know why this happens but no workaround needed.

Upvotes: 1

Views: 89

Answers (2)

john Smith
john Smith

Reputation: 17906

this is caused by the positioning of the arrows, in your example-link the left-arrow hover is working when mouse is about 150px below the left arrow, you should give it a width and height in px so the hover acts only when you are really hovering the box

additional, the div.b-wrap is over the left arrow box use the property z-index

Upvotes: 3

Sowmya
Sowmya

Reputation: 26969

Add z-index:100 to .arrow-left

Upvotes: 1

Related Questions