When I mouse over linked images I see hover background color beneath the image. How to avoid this?
Is there any solution that would not involve applying special class to a elements (like a.nobackground:hover)?
CSS:
a:hover, a:focus {
background-color: rgb(240,39,96);
cursor: pointer;
}
HTML:
<img src="with_transparency.png" alt=""/>
edit:
setting img background to none doesn't work
a img {
background: none !important;
}
setting img background to any other color would do the job if there's no non-solid color (or graphic) beneath the image (in this case .png)
a img {
background: #000 !important;
}
Does setting the background color of the images do what you want?
a img {
background: none;
}
Depending on your stylesheets, you might need the !important bang in front of "none" to overwrite other conditions.
Edit: On second thought, you might want to explicitly set a color value instead of simply saying "none."
Another edit: True, if the color or background behind the transparent PNG wasn't a solid color, you'll encounter some issues. One alternative is this:
And the CSS:
.transparent_png {
background-image: url('with_transparency.png');
background-color: transparent;
display: inline-block;
width: ??px;
height: ??px;
}
So here, you're not actually using an image tag, but can overwrite the background-color property that's normally applied on a:hover and a:active. Does this work?
If I understood the question correctly... You will need to either apply a special class to that specific link, or call the link by its location if it´s different from others. For example:
div div div a {}
And as Matt said you might need to use !important because you have a rule that includes all the links in the page. I´d recommend a different class, it´s better from a semantic´s point of view.
Related
I have this in line:
<div class="blue-car">
Car
</div>
<div class="iColor">
Blue
<div>
.blue-car:hover { color: red; }
.iColor:hover { color: read; }
I would like to make when someone hover to Car div second div which iColor change css and when hover to iColor div blue-car change css.
ie. I hover to 'Car' , 'Blue' will change color to red and when I hover to 'Blue' , 'Car' will change color to red, I want to make people aware that this two link is related.
I would love to have this in css only. No jquery. I have tried many no achievement at this moment.
Let me clear this, here is an example on this site. You could see when you hover to a country map, css link on right side will change, and you could see when you hover to a country link, country map css will change. This means this two div work each other. How they do this on this site: http://www.avito.ru
To start, CSS does NOT have a previous sibling operator. The only siblings that can be selected are adjacent (using +) or general (using ~).
It is possible to achieve the effect that you are seeking using only HTML and CSS. Below is one solution: http://jsfiddle.net/KGabX/. Basically, the .area is displayed as a table, which makes it wrap around the link and the image. However, the link is positioned absolutely, which prevents it from being "included" in a territory wrapped by the .area. This way, the .area is wrapped only around the image. Then, hovering over the .area we highlight the link. And, by hovering over the link we highlight the image.
Markup:
<div class = "area">
Link
<img src = "http://placehold.it/100x100" />
</div>
Styles:
.area {
display: table;
position: relative;
}
.area:hover > a {
color: red;
}
.area > img {
cursor: pointer
}
.area > a {
position: absolute;
right: -50px;
top: 50%;
font: bold 15px/2 Sans-Serif;
color: #000;
text-decoration: none;
margin-top: -15px;
}
.area > a:hover {
color: initial;
text-decoration: underline;
}
.area > a:hover + img {
opacity: 0.5;
}
Although I could not interpret what you wrote very well, I immediately noticed a flaw in your css selector.
Change your code to this:
<style>
.blue-car:hover a { color: red; }
.iColor:hover a { color: red; }
</style>
What's different about it? iColor:hover a. Look at the a, anchor selector. It was added because your previous CSS was only selecting the div. In css the child element, in this case the anchor, will supersede it's parents. There's two ways you can approach this. The first, or make the anchor tags color in css inherit.
If this wasn't your problem I'll fix my answer.
I'm not quite sure what you're asking because your question is a bit unclear.
From what I can understand, your issue stems from the fact that you're referring to the color property of the div, rather than the color property of the link.
That's a simple fix: all you need to do is drill down through the div to the link.
.blue-car:hover a{
color: red;
}
.iColor:hover a{
color: red;
}
Demo
Keep in mind that this isn't the best way to do this unless you absolutely need to refer to the links within the context of the div. I understand that your question fits into a broader context within your code, but for the example you gave here, all you really need is this:
a:hover{
color: red;
}
Again, I realize that you may need to change the colors or be more specific, but there's probably a better way to do this, even if that's the case.
The issue with this particular implementation is that your div is larger than your link, and a hover on your div is what activates the color change, so you'll run into this issue:
html{
background-color:#739AC5;
}
img{
display:inline-block;
color:#739AC5;
background-color:#739AC5;
margin:0px;
}
I added two inline-block gif images. However, after I add them, the background color changes from a light blue to white but only on that line. I've added color and background-color properties to image but nothing changes. If I remove the images from my HTML, the background-color returns to normal. I searched somewhere to change line-height:0; but this did not work for me either.
Any ideas as to what is going on? I might add I am using bootstrap but I linked my stylesheet last.
There is a more specific selector for img elements, such as:
div img { background-color: #fff; display: block; }
This selector overrides the other one since specificity trumps the cascade.
please take a look here.
I have added the following code:
.entry_blog a {color:#000;}
.entry_blog a:hover {background-color: #000;color: #FFD700;}
The text links work fine. However when you go over the images, you can see a black line appearing in the bottom of each image inside the <div class="entry_blog singlepageentry" itemprop="articleBody"> div.
I cannot add any new class to the images links. If I could add an image to the images links, I could simply add a
.entry_blog .newclass a:hover {background:none}
However since there is no such a possibility, does anybody know how, in this case, I can remove the background from the images inside the entry_blog div?
Thank you in advance
Seeing as all your images appear to be standalone blocks, all you need to do here is set your img elements to display as block-level elements (using display: block). This forces them to fill the containing a element without leaving any gaps, fully hiding any background which may be underneath:
.entry_blog a { color:#000; }
.entry_blog a img { display:block; }
.entry_blog a:hover { background-color: #000; color: #FFD700; }
Your question is sort of confusing.
The best method is to add background:none or background:transparent to .entry_blog a
You say you can't add any new style to image links. What does this mean?
Surely you can alter the CSS.
I'm aware that the :empty pseudo-class will select all elements with no children, but I want to only select elements with text-nodes as children.
I have a bottom-border on my hyperlinks that're a different color than the text, but this is a problem because the hyperlinked images are also getting this underline.
I've tried a *:not(*){ border-bottom-width: 0; } in an attempt to fix this, but it didn't work. Is there a way to select a tags with only text-nodes for children?
If I understand your problem correctly, you are trying to keep your hyperlinked images from being underlined. If so, why not do something like: a img { text-decoration:none }?
Edit: If its the links on img tags you don't want underlined, apply a class to those links with text-decoration:none
NEW ANSWER:
If you want a border under the image, but not the text do this:
a img { border-bottom: 1px solid #000; }
a:emtpy { border: none; }
If you want the opposite (border under the text but not the image) do this:
a:empty { border-bottom: 1px solid #000; }
a img { border: none; }
OLD ANSWER:
If it's just a problem with images that are wrapped in a tags, try:
a img { border-bottom: none; }
Instead of a crazy selector, why not hide the border with a negative margin:
a img {
margin-bottom: -6px;
}
Demo
When the ONLY CHILD of <a> is not an img ...
a:only-child:not(img)
{
border-bottom-width: 1;
}
This cannot be accomplished because of the way border property is applied and rendered outside the top-most box of your anchor - effectively the only way to achieve such an effect with a border would be to negate the property. Sometimes it coult be visually acceptable to use a bottom border in a background colour to overlay over that of of your anchor's - an unreliable practice to be frowned upon. Maybe the effect could be simulated with filters, but I wouldn't count on it being sufficiently well-supported cross-browser.
What I propose is going back to the text-decoration property *while still maintaining a different, independent underline colour` - a neat approach overall, but not without the overhead of an additional element:
<style>
.fancy-underline { color:blue; text-decoration:underline; }
.fancy-underline a { color:black; text-decoration:none; }
</style>
<span class="fancy-underline"><a href="#">I am a fancy link
<img src="//placekitten.com/30/30/" /> with an image in the middle of it
</a></span>
http://jsfiddle.net/ovfiddle/TwmmF/3/
I ended up just using jQuery. I don't believe it's possible with just CSS right now.
jQuery('document').ready(function(){
jQuery("a").each(function(){
if(this.children.length !== 0)
this.style.borderBottomWidth='0';
});
});
I've been trying to use a:hover pseduo class so that when you hover over the image, you get a border to appear so that it looks clickable.
However, when I do this the border appears below the image in the space below but I'm unsure why.
#overlay a:hover {
border: solid 2px #666;
}
As you can see the border is not around the image, it's below it.
Hope someone can help me with this problem.
Put the border on the image, not the anchor.
#overlay a:hover img {
If your image has position: relative or one of the crazy non-block alignments, then the enclosing link doesn't expand to surround it.
We need to see some HTML to be sure, but try to take alignment parameters off the image, and you should it working. If you made the <a> position: relative I think the link block would surround it.
Use Firebug to experiment with DOM object layouts.
Try this:
#overlay a:hover {
border: 2px solid #666;
}