CSS- Target Text Links with Bottom Border on Hover, But Image Links with No Border

CSS- target text links with bottom border on hover, but image links with no border

Sorry, what you'd want is some kind of :parent pseudo-class that selects the child but applies to the parent, which unfortunately does not exist (not even in CSS3).

You'd have to do a bit of Javascript, selecting all elements matching #sidebar a:hover, then applying the red bottom border on the condition that they don't have a child IMG element.

CSS Link hover not for images

No problem.

Add a class to your text links. Then target those links like this.

a.testing:hover {  color: #492512;  border-bottom: 2px dashed #94705A;}

<a href="home">  <img src="http://cdn.sstatic.net/stackoverflow/img/sprites.svg?v=bc7c2f3904bf" alt="Logo" class="logo-img"></a>
<a class="testing" href="home">  TESTING</a>

css a:link style text and images

The problem is with the link element <a>, not with the image link itself. When you specify a bottom border for the hover state of <a>, it also applies to the link that contains the image. So when you hover on such a link (containing an image), it's the link that shows the border-bottom. Not the image.

There's a fix for this though. Try applying:

a img {
    display: block;
    }

This will reset the <a> styling. There is one caveat for this method — using this with inline images might break the layout. So use it sparingly.

No border on anchor tags that contain an image

I found this: http://konstruktors.com/blog/web-development/1122-remove-border-from-image-links/

It basically is a very simple hack that looks like this:

a img { border:none; vertical-align:top; }

It works like a charm and has no browser-conflicts: See article for more details.

EDIT: The border:none doesn't actually do anything useful in most circumstances. The border is on the anchor, not the img tag, so if you've already zeroed out the border on anchored images with a global CSS reset, you'll only need vertical-align:top to push the a's border up and behind the image so it's no longer visible (as long as your image is opaque).

Remove border from a-Tag if the link is an image

a img, a img:hover { border:none; }

if you have only one a-tag that has an image, you can use an id

#myImageATag, #myImageATag:hover{
   border:none;
}
<a id="myImageATag"></a>

If you wan to apply to many others, you can use a class

.linksWithImages, .linksWithImages:hover{
        border:none;
}

I don't know if you can use Jquery but this is a solution to check if there is an image then remove the border. How to check if the a tag has an image below in jQuery

$('a').each(function() {
    if ($(this).find('img').length === 0) {
        $(this).css("border", "none");
    }
});

Active Class and Hover Border Causing Image in List of Link to Skip Out of Grid in HTML and CSS using Bootstrap

Right, so you need to add a new row between your first two and last two col-xs-6. Your general structure should look like the following:

<section id="visualizations">
  <div class="row">
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
  </div>  
  <div class="row">
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
  </div>  
</section>

Expand bottom border on hover not working?

There were two main problems with your code (other than the syntax errors):

• You weren't setting display: block to the a:after pseudo-element. This is mandatory as it is the one that provides the pseudo-element a height and a width. Without this, the pseudo-element will be 0 x 0px and so you won't be seeing anything.
• The way your Sass code was indented (I assumed you're using Sass syntax and not the SCSS one based on the missing colons, braces and indentations) means that a:hover:after selector is nested under the a:after selector and so the final selector output would be .menuHolder li a:after a:hover:after. This doesn't match any element and so nothing happens on hover.

Other than these two changes, there were 3 places where the indentations were not consistent. That is there were areas where 5/7 spaces were provided instead of the normal 2/4/6/...

The fixed code in Sass syntax would be as follows. A demo with equivalent SCSS syntax is available here. I've used SCSS syntax for the demo because JSFiddle doesn't support Sass syntax.

a:link, a:visited
  text-decoration: none
  color: black

.menu
  white-space: nowrap
  overflow: hidden

.menuHolder
  overflow: hidden
  position: fixed
  display: inline-block
  top: 0
  right: 0
  width: 110%
  padding: 6px 0 0
  background-color: rgba(70, 106, 135, 0.65)
  text-align: right
  transition: all 1s ease-in-out
  max-height: 37px
  z-index: 10

  ul
    margin: 0
    padding: 0

  li:hover
    a
      cursor: pointer
      color: $menuGreen
      transition: all 0.1s ease-in-out

  li, #menuBtnOn
    transition: all 0.1s ease
    text-indent: initial
    resize: none
    float: right
    display: inline-block
    padding: 15px
    line-height: 5px
    font-family: "Roboto", sans-serif
    font-weight: lighter
    font-size: 14px
    color: black

    &:not(:first-child)
      border-right: 1px solid rgba(37, 37, 37, 0.28)

    a:after
      display: block
      content: ""
      border-bottom: solid 3px $menuGreen
      transform: scaleX(0)
      transition: transform 250ms ease-in-out
      margin-top: 10px

    a:hover:after
      transform: scaleX(1)

  #menuBtnOff,
  #menuBtnOn
    transition: all 0.3s ease
    cursor: pointer
    color: black

    &:hover
      color: $menuGreen

  #menuBtnOn
    font-size: 20px
    float: left

---

One additional improvement that I'd suggest is to put the :hover effect on the li itself (that is, have the selector as .menuHolder li:hover a:after instead of .menuHolder li a:hover:after) because the change of text color happens on the :hover of the li itself and this would make it consistent.

Here is a demo for this version.

Making Heading Text Overlap its Bottom Border in a Box-like Fashion

How you go about it is going to have to depend on whether or not you need this to work on a printed background or not.

http://codepen.io/cimmanon/pen/gnEdA

Flexbox

This will work on printed backgrounds no problem, but browser support is poor: IE10, Opera, Chrome. It does not require additional markup. http://caniuse.com/#feat=flexbox

h1 {
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  font-style: italic;
}

h1:before, h1:after {
  display: block;
  border-bottom: 2px solid blue;
  content: " ";
  margin-bottom: 6px;
  -webkit-flex: 1 1;
  -ms-flex: 1 1;
  flex: 1 1;
}

White background

This should work for just about any browser you can think of. However, it requires a solid background and additional markup.

h1 {
  border-bottom: 2px solid blue;
  text-align: center;
}

h1 span {
  background: white;
  position: relative;
  top: 6px;
}

Stop CSS 'a' styles being applied to images that are linked

I'd suggest adding a class to the link, so you can do

a.imglink:hover{
  border:0;
}

Alternatively, if you can't control that class, you can try adding a negative margin to your image to ensure the border doesn't show:

a img{
    margin:0 0 -1px 0;
}

That -1px might need adjusting based on your other rules

Here's a fiddle to show the negative margin solution: http://jsfiddle.net/QRXGe/

---

Related Topics