CSS Div link text underline hover

3
votes

I have a simple div like this...

<a href="#">
  <div class="promo-box promo-1">
    <div class="promo-content">
     <h2>Heading here</h2>
     <p>Text content here.</p>
    </div>
  </div>
</a>

...which allows me to change background color on div hover. Works great, but as a result, I get the text inside the link showing an underline on hover. I have tried several ways to target the h2 and p, but still can't get rid of the text-decoration on hover.

Any ideas on what html element i need to target to apply text-decoration: none ?

CSS here...

.promo-box
{
text-align:center;
border-radius:5px;
padding:10px;
margin-bottom:20px;
min-height:240px;
}
h2
{
font-family:Lato, Arial, Helvetica, sans-serif;
font-weight:700;
color:#FFF;
font-size:20px;
text-decoration: none;
}
.promo-box p
{
font-family:'Open Sans', Arial, Helvetica, sans-serif;
font-weight:400;
color:#FFF;
font-size:16px;
line-height:16px;
}
.promo-1
{
background-color:#125595;
}
div.promo-1:hover;
}
3
htmlcsshyperlinkhover
Showing your existing CSS would be helpful - Diodeus - James MacFarlane

3 Answers

6
votes

you need to apply text-decoration to the link not to h2 or p like this:

a{
    text-decoration:none;
}

you can't apply a style text-decoration:none to element inside a line.
You can assign a class to the link if yu don't wamt to apply to all link this rule, classes are made for this.

Example insert a class inside css

.not-underline{
        text-decoration:none;
    }

update your html adding a class to your link

 <a href="#" class="not-underline>
  <div class="promo-box promo-1">
    <div class="promo-content">
     <h2>Heading here</h2>
     <p>Text content here.</p>
    </div>
  </div>
</a>

DEMO

2
votes

You can add a parent selector name before anchor tag in CSS. 

<div class='display'>
  <a href="#">
    <div class="promo-box promo-1">
      <div class="promo-content">
        <h2>Heading here</h2>
        <p>Text content here.</p>
      </div>
    </div>
 </a>
</div>

CSS:

.display a{
    text-decoration:none !important;
}

Here is a demo

0
votes

And to avoid text underlining on hover, add this to your css:

a:hover{
  text-decoration:none;
  }