Suppose I have the following selector:
a { padding: 1em; }
a:hover { backgrond-color: #FF0000; }
And suppose I have the following HTML code:
<img src="so.jpg">
What happens is that <img> gets red-background color on mouse hover.
Any ideas how to fix it?
Thanks, Boda Cydo!
Either be more specific about your a:hover selector
.something a:hover { background-color: #ff000; }
Or create another selector that blocks the background from being changed in the instances that you don't want it to
a.no-bg-change:hover { background: none !important; }
<img src="so.jpg">
I'm curious how you're seeing the red background through a jpg. Nevertheless, this should do the trick.
a:hover img {
background:transparent;
}
Since your image is opaque, most of the time just removing the border and padding is enough to hide the red from showing.
a img { border: none; padding: 0; margin: -1em; }
A negative margin there to negates the a padding
jQuery('a').hover(function(){
jQuery(this).has('img').css('background', 'none');
});
Ok, you won't believe me, but I had the same problem above and I resolved as follows:
I had something like this:
<img src"path/to/image.gif">
And in my CSS I had:
a:hover { text-decoration: underline; }
And, believe me, I just had to put the 'img' tag in the same line as the 'a' tag, like this:
<img src="path/to/img.gif">
And that was all!!!
This is weird, you are saying to make a with background, but only if there is image, then do not. And what if a link has and a text and an image? Make it simpler, just tell exactly that you want. I assume you could do this for example:
<img src="so.jpg">
<span class="text">some text</span>
<span class="text">some text</span> and <img src="so.jpg">
a .text { padding: 1em; }
a:hover .text {background-color:#ff0}
Related
This question already has answers here:
How are the points in CSS specificity calculated
(7 answers)
Understanding CSS selector priority / specificity
(4 answers)
Closed 3 years ago.
I have a link in a class like this:
<div class="brand">
amazona
</div>
And I changed link color and link:hover color like this:
a {
color: green;
text-decoration: none;
}
a:hover {
color: red;
}
It works perfectly. But when I change the link color in the div like this:
.brand a{
color:brown;
}
The link color is brown even I move the mouse over it. I expect the hover color to be red. Why does it happen? and how can I fix it?
To solve this problem first you need to understand CSS specificity (visit: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity).
And if you are using .brand a CSS is becoming more specific, hence on a:hover also you need to add more specific CSS like .brand a:hover
a {
color: green;
text-decoration: none;
}
a:hover {
color: red;
}
.brand a{
color:brown;
text-decoration: none;
}
.brand a:hover{
color:red;
}
<div class="brand">
amazona
</div>
I am going to take a shot at answering this because I feel it can be better clarified. As mentioned above, a deeper understanding of the CSS language is needed, specifically a deeper understanding of CSS selectors, and how they work.
CSS implements the code you write with in your style-sheet according to order, what was write first is computed first, what was written last is computed last, therefore; if you write:
.some-txt{
color: red;
}
.some-txt{
color: blue;
}
.some-txt{
color: razzle-dazzle-purple;
}
then the text with class some-txt is going to be the color, 'razzle-dazzle-puple'.
This is becuase razzle-dazzle-puple was the last color in the order of assignment given. In your code you gave the color brown to a after red, canceling your previous assignment. To fix this you either be more specific with your selectors like so:
.brand a:hover {
color: red;
}
or just simply try moving things around, I tested your code and I think what you were looking for is this:
a {
color: green;
text-decoration: none;
}
a {
color: green;
text-decoration: none;
}
.brand a {
color: brown;
}
a:hover {
color: red;
}
remember when you add hover to a property, you are adding it to the property, so when you change that property, after you already assigned it a value, you are change the whole property. I hope this makes sense, some things are hard to explain, obviously the best way to understand something is by playing with it.
Because you specified every single link in a .brand div has the colour brown.
You can do
.brand a:hover {
color: red;
}
This will work :)
.brand a style is overriding the a:hover style. if you exchange the order of the two styles in your style-sheet it will work.
Issue: When you click our logo a black bar appears underneath it in both firefox and chrome. If you hold the click on the logo it'll stay.
Below is some of the code I have tried to remove the black bar on focus:
a:active, a:focus {
outline: none;
}
a {
outline: none;
}
:focus {
outline:none;
}
::-moz-focus-inner {
border:0;
}
a img {outline : none;}
img {border : 0;}
Can someone tell me what is causing the black bar?
The reason this is happening is because, on line 45 of screen.css, you have the rule saying "background-color: #000 !important;" which is affecting a.coa-link (Your rule is set to affect a:focus, a:active, amongst others. This is why it only occurs when you click/click-hold on the link [focussing on the element.])
If you add to line 35 of style.css:
#header a.coa-link { clear: both; /* YOUR EXISTING CODE */
background-color: transparent !important; /* NEW LINE OF CODE */ }
Then your issue will not occur anymore.
HTH
Try setting the background-color for .coa-link class, to rgb(43,66,114) which is the background-color set to your body element.
Ok so it is a very weird issue, but a workaround is to add a div around the image:
<a class="coa-link" href="/" title="Home">
<div>
<img src="/files/2012/07/AC-banner-white-test7.png" alt="">
</div>
</a>
It worked for me in the chrome inspector.
This is happening because you have focus styles implemented for <a> tags. The reason it's shown as a black bar is because the <a> that surrounds the logo image does not have display: block; in the CSS. If it did have display: block, the entire header would have a black background.
Another problem is that there is an !important tag in there. Booo.
You need to add the following style to fix the black bar in your logo link:
#header .coa-link a {
display: block;
}
#header .coa-link a:focus,
#header .coa-link a:active, {
background: transparent!important;
}
I would never ever suggest using the !important declaration in CSS, but as someone has already added it in, you need to override it. Ideally remove the !important tag that's shown in the attached image, and then you won't need it in the fix.
I would like to create links that have icons included in the link.
For example, take a modified version of the chat/meta/faq links from Stack Overflow.
Here is one attempt.
HTML
<div id='clickable'>
<a href="#chat">
<div class='so-icon'></div>
chat
</a>
...
</div>
CSS
#clickable div {
display:inline-block;
vertical-align: middle;
}
.so-icon {
background-image:url(http://www.madhur.co.in/images/icon_stackoverflow3.png);
width: 30px;
height: 30px;
}
a {
text-decoration: none;
margin-right: 10px;
}
a:hover {
text-decoration: underline;
}
The one problem with this design is that the underline (hover over the link to see) appears on more than just the link text, but also on some whitespace before that.
A couple of solutions I can think of are:
Having two separate <a> elements, one for the icon, and one for the text. Violates DRY.
Not using a elements at all, but rather javascript, to implement the link functionality, while styling both the icon and text/span elements separately.
Isn't this something that should be possible to accomplish using CSS only, and not having to recourse to javascript?
Here we go, a solution with no additional markup or pseudo-elements, based on #sandeep's.
http://jsfiddle.net/z4Gs2/2/
like this??
http://jsfiddle.net/HBawG/
a p:hover {
text-decoration: underline;
}
I tried to edit your work
Hope i helped.
You can apply the background image directly to the tag. Something like this:
chat
meta
faq
with the CSS:
.so-icon {
background:url(http://www.madhur.co.in/images/icon_stackoverflow3.png) no-repeat left center;
width: 30px;
height: 30px;
}
a {
display: inline-block;
text-decoration: none;
padding-left: 35px;
margin:10px;
line-height: 30px;
}
a:hover {
text-decoration: underline;
}
You should remove the carriage return between your div (image) and your hyperlink text (to avoid undesired blank spaces)
Then you should modify the css of .so-icon class adding margin-right: 5px (for example)
You can find the modified version of your example here
http://jsfiddle.net/q2vE4/4/
<style>
.btn{
display: inline-block;
padding: 15px 10px;
background: gray;
}
.btn:hover{
background:lightgray;
color:red;
}
</style>
<div class="btn">
text
</div>
works nicely. However if we have that:
<div class="btn">
text
</div>
it wouldn't work exactly as the first one. The anchor's text wouldn't be affected. Okay what if we add to the CSS:
.btn a:hover{
background:lightgray;
color:red;
}
That will work, but only if you hover exactly on the anchor, but still hover on the div rectangle wouldn't affect the anchor's text.
How can I tweak that without any javascript, so both rectangles acted identically?
http://jsfiddle.net/vaNJD/
UPD: adding !important keyword wouldn't help
Because all web browsers set a default color (and text-decoration) for a elements, you need a more specific selector to override the default. Try this instead:
.btn:hover, .btn:hover a {
background:lightgray;
color:red;
}
If you really want the two boxes to be identical, you would also need to override the un-hovered button as well:
.btn a {
color: black;
text-decoration: none;
}
It may also be worth pointing out that IE6 only supports the :hover pseudo-class on a elements. You may want to work around this by setting the a to display: block and adding the background color there.
You can accomplish the same effect by getting rid of the container and applying the .btn class directly to the a element. See the third box in this updated fiddle: http://jsfiddle.net/mlms13/vaNJD/5/
.btn:hover{
background:lightgray;
color:red;
}
.btn:hover a{
color: red;
}
Change to:
.btn:hover,
.btn:hover a{
background:lightgray;
color:red;
}
http://jsfiddle.net/vaNJD/4/
Like this?
.btn:hover a{
color:red;
}
I found one way in which you should set height for div tag and use it again for anchor tag and set anchor's display properties as block
for example
<style>
.divest
{
height:120px;
}
.divest a
{
display:block;
height:120px;
}
</style>
<div class="divest">here is hyperlink text</div>
I have this html code
<div id="mybox"> aaaaaaa </div>
and this is my css
#mybox{
background-color:green;
}
#mybox:hover{
background-color:red;
}
the question is how to hide the content of the div (aaaaaaa) when the mouse hover event by using css only and without changing the structure of the code
I think I should put some code under #mybox:hover but I don't know the code.
Without changing the markup or using JavaScript, you'd pretty much have to alter the text color as knut mentions, or set text-indent: -1000em;
IE6 will not read the :hover selector on anything other than an anchor element, so you will have to use something like Dean Edwards' IE7.
Really though, you're better off putting the text in some kind of element (like p or span or a) and setting that to display: none; on hover.
Here is the simplest way to do it with CSS3:
#mybox:hover {
color: transparent;
}
regardless of the container color you can make the text color transparent on hover.
http://caniuse.com/#feat=css3-colors
Cheers! :)
Hiding through CSS is achieved by using either the "visibility" or the "display" attributes. Though both achieve similar results, it's useful to know the differences.
If you only want to hide the element but retain the space occupied by it, you should use:
#mybox:hover {
visibility: hidden;
}
If you want to hide the element and remove the space occupied by it, so that other elements can take its space, then you should use:
#mybox:hover {
display: none;
}
Also remember that IE6 and below do not respond to :hover for anything except A tags. In which case, you'll need some Javascript to change the classname:
document.getElementById('mybox').className = 'hide';
and define the "hide" class in CSS:
.hide { display: none; }
sounds silly but font-size:0; might just work. It did for me. And you can easily override this with the child element you need to show.
You could make the text color the same as the background color:
#mybox:hover
{
background-color: red;
color: red;
}
What about opacity
#mybox:hover {
opacity: 0;
}
Best way to hide in html/css using display:none;
Example
<div id="divSample" class="hideClass">hi..</div>
<style>
.hideClass
{display:none;}
</style>
This is a late answer but still, guess setting the color to transparent is the best option.
#mybox:hover{
background-color:red;
}
There are many ways to do it:
One way:
#mybox:hover {
display:none;
}
Another way:
#mybox:hover {
visibility: hidden;
}
Or you could just do:
#mybox:hover {
background:transparent;
color:transparent;
}
#mybox:hover { display: none; }
#mybox:hover { visibility: hidden; }
#mybox:hover { background: none; }
#mybox:hover { color: green; }
though it should be noted that IE6 and below wont listen to the hover when it's not on an A tag. For that you have to incorporate JavaScript to add a class to the div during the hover.
I would say:
#mybox{
background:green;
}
#mybox:hover{
color:transparent;
}
<div id="mybox">
This text will disappear on hover
</div>
This will hide text, but of course, it still contains the text, but it is a tricky way to hide the text (make in invisible), but it will work well
Sorry to be 7 years late but this could be achieved by using the below:
.your-block{
visibility: hidden;
width: 0px;
height: 0px;
}
This will keep the content on the page and won't occupy any space whereas display:none will completely hide the content.
Using the above code can be useful if you need to reference code in a div but don't need it to display.
.button {
width: 40px;
height: 40px;
font-size: 0;
background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%221284%20207%2024%2024%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1298.5%20222.9C1297.5%20223.6%201296.3%20224%201295%20224%201291.7%20224%201289%20221.3%201289%20218%201289%20214.7%201291.7%20212%201295%20212%201298.3%20212%201301%20214.7%201301%20218%201301%20219.3%201300.6%20220.5%201299.9%20221.5L1302.7%20224.2C1303%20224.6%201303.1%20225.3%201302.7%20225.7%201302.3%20226%201301.6%20226%201301.2%20225.7L1298.5%20222.9ZM1295%20222C1297.2%20222%201299%20220.2%201299%20218%201299%20215.8%201297.2%20214%201295%20214%201292.8%20214%201291%20215.8%201291%20218%201291%20220.2%201292.8%20222%201295%20222Z%22%20fill%3D%22%239299A6%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") #f0f2f5 no-repeat 50%;
}
<button class="button">Поиск</button>