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


Tags: html,css

Problem :

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?



Solution :

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.


    CSS Howto..

    How do I evenly distribute a group of spans across a div?

    How do I make my CSS link up to files in different directories

    How to change the css color code permanent using php

    How do I spilt the footer into different widths?

    How can I center a div within another div?

    How can I toggle between multiple .css with jquery?

    How to access dynamic div inside any div using CSS

    How to edit jquery slider

    How to place a scroll down button in the middle of split screen window?

    How to make the logo drop a bit in the nav menu and other suggestions

    How to define a CSS fontface?

    How to get my “Register Now!” Link's to line up at the bottom using CSS

    How to visually position image before heading element

    Rotation of a div gives a black background on IE, how can I remove it?

    How can I make the menu to wrap when I resize my browser?

    How do I stop this div's width from decreasing?

    How to mail HTML/CSS output as attachment?

    How to cancel a CSS style set by 'hover child' selector on event?

    How to style the tick mark checkbox using css without using images?

    VERY BASIC: How to inline social media logos on a header

    How to align a Wordpress navigation bar to the right of a logo?

    How to return a “text” in css less?

    How to remove rounded from to select query in jquery?

    IE8 and lower showing background white

    jQuery - how to “reset” a .css() rotated icon?

    How to increase the gap between text and underlining in CSS

    How to add php to wordpress form

    How to have multiple CSS color transitions on a single text line?

    How to load chosen alternative css as default css? [closed]

    How to make a layout in which certain tags will fill remaining space of parent tag/container?