CODEWITHSUNDEEP
htmlcss
bfunphoto
bfunphoto

Reputation: 105

How do I get a link to ignore hover on mouseover?

Currently I have my site set up so that links have an underline on mouseover. How do I get it so that some links ignore this?

My code: 

a:hover { 
border-bottom: solid #000 2px !important;}

The HTML that I don't want to have this applied to it:

<div class="banner">
<h1><a href="home.html" class="titleLink">Brian Funderburke Photography &amp; Design</a></h1>

I assume maybe I apply text-decoration: none to my h1, but the issue is selecting my h1 in css. None of my different attempts were working so I think I was writing the selector wrong. How would I write a selector in this situation?

Upvotes: 1

Views: 271

Answers (7)

imGaurav
imGaurav

Reputation: 1053

a {
  text-decoration: none;
}
a:hover {
  border-bottom: solid #000;
}
.borderBottom0 {
  border-bottom: 0!important;
}
<div class="banner">
  <h1><a href="home.html" class="titleLink">Brian Funderburke Photography &amp; Design</a></h1>
  <h1><a href="home.html" class="titleLink borderBottom0">Brian Funderburke Photography &amp; Design</a></h1>

Upvotes: 0

Dejan Munjiza
Dejan Munjiza

Reputation: 798

You need to define a:hover specific for titleLink class:

a.titleLink:hover {
   border-bottom: none !important;
}

Or if you are using that class in other parts of page, you need to define new class or helper class for that particular link.

Upvotes: 0

D3myon
D3myon

Reputation: 181

You could apply the property by class. So you can write:

.titleLink:hover {text-decoration: none;}

Hope it helps.

You can make it more reusable by writing a class

.noDeco:hover {text-decoration: none;}

and then use it as class for links where you don't want the underline.

Upvotes: 0

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

You can do this:

Add a new class

CSS

a.noborder:hover { 
border-bottom: none !important;}

HTML

<div class="banner">
<h1><a href="home.html" class="titleLink noborder">Brian Funderburke Photography &amp; Design</a></h1>

Upvotes: 1

Viktor Maksimov
Viktor Maksimov

Reputation: 1465

.banner h1 a:hover { border-bottom: none !important; text-decoration: none !important; }

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324650

First, remove !important. It is unnecessary and makes things more difficult than they need to be.

Then, assuming .titleLink is your "don't put hover effect on this" class, just do...

a.titleLink:hover {
    border-bottom: none;
}

Done.

Upvotes: 4

Balaji Viswanath
Balaji Viswanath

Reputation: 1684

.banner h1 a:hover { 
    border-bottom: 0 !important;
}

Upvotes: 1

Related Questions