CODEWITHSUNDEEP
htmlcsscolorsmousehover
lisap
lisap

Reputation: 33

Hover over link colour not working html css

Im trying to change the hover colour of a rectangle shape which ive made a link.

The html is 

<a href='page1.html'>
<div class="tri">
&nbsp;

</div>
</a>

and the css is 

.tri {
width:100px;
height:200px;
background: #b51e4c;
position:absolute;
top:100px;
left:100px;
}

I think this is the code I need to put in

a.tri:hover { background-color: yellow;}

but its not working please help!

Upvotes: 1

Views: 48

Answers (3)

G.L.P
G.L.P

Reputation: 7207

Try to use like this: Demo

CSS:

.tri a {
    width:100px;
    height:200px;
    background: #b51e4c;
    position:absolute;
    top:100px;
    left:100px;
}
.tri a:hover {
    background-color: yellow;
}

HTML:

<div class="tri"> <a href='page1.html'>&nbsp;</a></div>

Its not good practice to use <div> inside <a>. So interchanged the position of both in html as well in CSS

Upvotes: 2

Katherine
Katherine

Reputation: 639

Your code should work correctly. Try adding the class directly to the <a> tag. Here is the codepen demonstrating your code:

http://codepen.io/anon/pen/NPVeoP

Upvotes: 0

Akshay
Akshay

Reputation: 14348

You have to add space a[here].tri:hover { background-color: yellow;}

.tri {
width:100px;
height:200px;
background: #b51e4c;
position:absolute;
top:100px;
left:100px;
}
a .tri:hover { background-color: yellow;}
<a href='page1.html'>
<div class="tri">
&nbsp;

</div>
</a>

Upvotes: 0

Related Questions