I have a scenario where I want to have the text links with border-bottom, and set-up the css like this
a:hover {
color: #492512;
border-bottom: 2px dashed #94705A;
}
The problem is that the images that are wrapped in links also have this border-bottom, eg.
<a href="home">
<img src="logo.jpg" alt="Logo" class="logo-img">
</a>
How can I target the a:hover that it is only for text links? Pure CSS would be preferable.
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>
Hope this helps.
Added with EDIT
Here is Another Option
a:hover {
color: #492512;
border-bottom: 2px dashed #94705A;
}
a[href*='ignorethis'] {
text-decoration: none !important;
border-bottom: 0 none !important;
}
<a href="http://www.milk.com?ignorethis">
<img src="http://s.w.org/style/images/wp-header-logo.png" alt="Logo" class="logo-img">
</a>
<a href="http://www.milk.com">
TESTED
</a>
This achieves the same thing by targeting target all anchors whose href attribute contains the given value ('ignore this'). Other ways this can be used.
attribute *= contains value
attribute ^= begins with value
attribute $= ends with value
To use this just append '#special-test-value' to the end of the link or in the case of a targeted link append '?special-test-value=0' or in the case where the query string already exists use '&special-test-value=0'
I thought this was an interesting way to target links and that it might be new to a lot of people.
Another use case
If the case is that a single url or a specific set of urls you could use them to end target them and exclude the anchored images that way.
a[href$='somedomain.com/url1/'], a[href$='somedomain.com/url2/'], a[href$='somedomain.com/url.../'], a[href$='somedomain.com/urlN/'] {
text-decoration: none !important;
border-bottom: 0 none !important;
}
OK that's it have a great night.
Two ways, either wrap the text in a span (below sample) or set a unique class to links with text only.
a {
text-decoration: none;
}
a:hover {
color: #492512;
}
a:hover :not(img) {
border-bottom: 2px dashed #94705A;
}
<a href="home">
<img src="http://placehold.it/50/100/" alt="Logo" class="logo-img" />
</a>
<br>
<br>
<a href="home">
<span>Text</span>
</a>
It seems that pure CSS global styling doesn't work, so I resorted to jQuery to add a class to anchors which have images, like this:
jQuery("a").each(function(){
if ( jQuery(this).children('img').length > 0 ) {
jQuery(this).addClass("noborder");
}
});
And the CSS is:
a:hover {
border-bottom: 2px dashed #94705A;
}
a.noborder:hover {
border-bottom: none;
}
Thanks for all the comments and suggestions.
Cheers!
Well you can make a separate class for image links:
a:hover {
color: #492512;
border-bottom: 2px dashed #94705A;
}
a.image-anchor:hover {
border-bottom: 0 none;
}
<p>Text link</p>
<p><a class="image_anchor" href="stackoverflow.com"><img src="https://blog.stackoverflow.com/images/wordpress/stackoverflow-logo-300.png"></a></p>
Related
I have 3 different links in my html and I want to change the text color of only one specific link when I hover over. The problem is that when I apply the css, it changes the color for all the links. Please help!
You should put different id to your component for example
<a id="link1"></a>
<a id="link2"></a>
Then in your css change by doing that :
#link1:hover {
color: red
}
#link2:hover {
color: green
}
<a id="link" ></a>
#link:hover {
color: #F48832;
}
Append an unique class or id to the links in the html,then apply the css
.link1:hover{
color: red;
}
.link2:hover{
color: green;
}
<a class="link1">link1</a>
<a class="link2">link2</a>
Try this....
You should add custom css class to your specific link and that css class to add below css..
.specific_link:hover{
color: blue;
}
a:hover{
color: red;
}
<a class="specific_link">link1</a>
<a>link2</a>
<a >link3</a>
I do not want the picture to be underlined, but I need the hyperlink in the text to be underlined. How can I do that? It is a wordpress theme so I can't change the html I have to stay with css
.post-desc a{
border-bottom: 1px solid #FBCF00;
}
.post-desc a img{
border-bottom: none;
}
<div class="post-desc">
<img class="alignnone wp-image-2763 size-full" src="http://www.montrealguidecondo.ca/news/wp-content/uploads/2016/01/exterieur-1.jpg" alt="extérieur de Tod condo" width="639" height="438">
</div>
You can remove it under the image using display:table; on image, like this:
.post-desc a img{
border-bottom: none;
display:table;
}
Snippet:
.post-desc a {
border-bottom: 1px solid #FBCF00;
}
.post-desc a img {
border-bottom: none;
display: table;
}
<div class="post-desc">
<a href="http://www.montrealguidecondo.ca/news/wp-content/uploads/2016/01/exterieur-1.jpg" target="_blank" rel="attachment wp-att-2763">
<img class="alignnone wp-image-2763 size-full" src="http://www.montrealguidecondo.ca/news/wp-content/uploads/2016/01/exterieur-1.jpg" alt="extérieur de Tod condo" width="639" height="438">
</a>
</div>
to make it simple you may use vertical-align with a negative value to drop img as much as needed under the base line:
a {
border-bottom: solid;
}
a img {
vertical-align: -0.5em;/* average -0.25em equals vertical-align:bottom */
/* demo purpose: see border under img */
opacity:0.75;
}
text
<a href="#">
<img src="http://dummyimage.com/60" />
</a>
within the last stylesheet of your website , test this
a img {
margin-top:0.5em;
vertical-align: -0.5em;
}
or if you like better:
a img {
position:relative;
top: 0.5em;
}
The idea is to hide the border with the image itself
Text decoration underline
<div><a style="text-decoration:underline" href="http://www.montrealguidecondo.ca/news/wp-content/uploads/2016/01/exterieur-1.jpg" target="_blank" rel="attachment wp-att-2763"><img class="alignnone wp-image-2763 size-full" src="http://www.montrealguidecondo.ca/news/wp-content/uploads/2016/01/exterieur-1.jpg" alt="extérieur de Tod condo" width="639" height="438"></a>
You have set the border attributes on the <a> tags, so you can't just remove them on the containing <img> elements. Unfortunately, there is no "conatining" selector in css (yet) and apparently you can't edit the html, so we have to stick with the informations we've got.
The links with the containing images have the word attachment in the attribute rel. This is how to select them and disable their border:
a[rel~="attachment"] {
border-bottom: none !important;
}
I have a html strucute which looks like this
<div class = "f">
<a href="" class ="d" >
<span class ="b"> hello </span>
</a>
</div>
The activeElement is always the 'a' but I want to give to outline to span when 'a' is active. (By active I mean when we navigate by tab and 'a' becomes the activeElement)
I tried doing something like
.a:active {
&.b:focus{
outline : 1px solid white:
}
}
This works fine for me jsfiddle.
<a href="" class ="d" >
<span class ="b"> hello </span>
</a>
a:active > .b {
outline: red solid 3px;
}
This should be what you want, when a is active b will get an outline:
.a:active {
.b {
outline : white solid 1px;
}
}
Also your outline values are in the wrong order, so I changed them.
Hello I have 3 flags (Italian, german, english) with the purpose to change language for the whole site in future. How can I make a border on a hover effect that could alxo work with IE ?
this is the CCS
.miniflags {
float:right
margin : 5px 20px;
padding-right:10px;
}
and here the HTML
<div id="bandiere">
<a><img src="ita.png" class="miniflags" /></a>
<a><img src="ger.png" class="miniflags" /></a>
<a><img src="eng.png" class="miniflags" /></a>
</div>
Thanx for help
Alex
add
.miniflags img:hover {
border: 1px solid #000;
}
or
.miniflags a:hover {
border: 1px solid #000;
}
to your css
i believe the 2nd will work better (a:hover)
If you apply the miniflags class to the <a> instead, the :hover pseudoselector will work.
The miniflags class hardly seems necessary. Just remember that :hover works only for links in older versions of IE, so you will need to apply it to the <a> tags instead of the <img>.
<div id="bandiere">
<a><img src="ita.png" /></a>
<a><img src="ger.png" /></a>
<a><img src="eng.png" /></a>
</div>
<style type="text/css">
#bandiere img {
float:right
margin : 5px 20px;
padding-right:10px;
}
#bandiere a:hover, #bandiere a:focus {
border: 1px solid red;
}
</style>
IE (until 6 IIRC) only allows hover for links. So you'd have to add the :hover to the a not to the image. The <a> must have a href attribute for this to work of course.
My screenshot http://dl.getdropbox.com/u/240752/stars.gif
I want to have it so that only the text is underlined. The only way I can see of doing this is this:
.no-underline {
text-decoration:none;
}
.underline {
text-decoration:underline;
}
<span class="underline">Average customer review rating</span><img src="img/five-stars.gif" alt="five stars" width="78" height="16" title="5 star review rating" />
Is this the best way? or does someone know a leaner way? Thanks.
No other solution really. Though you can shorten it a little:
<span>Link Text</span> <img src="...">
a.imgLink { text-decoration: none; }
a.imgLink span { text-decoration: underline; }
That way you only need to specify one class.
In which browser do you have a problem with this? Most browsers do not apply text-decoration to images since it makes no sence.
othersize, just do like this:
<a class="imgLink" href="">some text<img src="" /></a>
.imgLink {
text-decoration: underline;
}
.imgLink img {
text-decoration: none;
}
If you want to add non-underlined image badges for reusable link types, such as displaying a wikipedia-style external link arrow, try the following style:
a.externalLink{
padding-right: 15px;
background: transparent url('badge.png') no-repeat center right;
}
Then in your markup:
bar