Getting certain links to have different hover effects

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

how would you call the a:hover pseudo class on another class. I have a border around my links when you hover over them, but I don't want to do the same thing when you hover over an image link so I set all links containing an image with the class "imglink". How would I define no hover over the imglink class. I've tried several variations:

Code: [ Select ]
a.imagelink:hover{border:none;}
.imglink a:hover{border:none;}
a imglink:hover{border:none;}
etc.
  1. a.imagelink:hover{border:none;}
  2. .imglink a:hover{border:none;}
  3. a imglink:hover{border:none;}
  4. etc.


any ideas?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • TsX
  • Graduate
  • Graduate
  • User avatar
  • Posts: 167

Post 3+ Months Ago

Make sure you are applying your class to the link!

My CSS sample:
Code: [ Select ]
a:hover{ border: thin solid #000000;}
a.imglink:hover{ border: none;}
  1. a:hover{ border: thin solid #000000;}
  2. a.imglink:hover{ border: none;}


When applying it to the image link, you need to call the class with the link:
Code: [ Select ]
<a href="www.google.com" class="imglink"><img src="mypic.jpg"></a>

It DOES NOT work when applied to your paragraph. I do not know why. I'm just telling you how to fix your problem.
  • Zwirko
  • Guru
  • Guru
  • User avatar
  • Posts: 1417
  • Loc: 55° N, 3° W

Post 3+ Months Ago

Intead of applying a specific classname to images that are links, you could, in your css, make all image links have no border.


Code: [ Select ]
a img {border: none}


If you want this to happen only within a certain container, you could do:

Code: [ Select ]
#header a img {border: none}


That's what I do. Works nicely too.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

I'm with Zwirko on the container part. I tend to save alot of bytes by rooting CSS selectors to an element with an ID then targeting the generic element types like that last example.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

rock on guys, thanks a bunch!

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 63 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.