Overriding css for a specific div?
i have a a:hover for all my links on my page:
a:hover {
background-color: blue;
text-decoration: underline;
color: black;
}
but but there are specific ones in a div that i don't want anything to happen when you hover over them, so can i do something like this?
#what_we_offer a:hover {
background-color: none:
text-decoration: none;
color: none;
}
basically i don't want it to do any of the above when it hovers over them specific links.
thanks
Yes that should work fine, although you likely don't want to set none unless you really don't want any style... setting your base colors etc. should work fine.
#what_we_offer a:hover {
background-color:#fff;/*presuming was originally white*/
text-decoration:none;
color:#000;/*presuming was originally black*/
}
PS I'm not sure if it was just a typo, but your original background-color:none: line was terminated with a colon vs. a semi-colon thus it would have caused issues.
#what_we_offer a:hover {
background-color: transparent;
text-decoration: none;
color: none;
}
use transparent instead of none, that works.
thanks for all the answers.
Rather than using id with css use Class
/* for link where you want to change color on hover */
.Link a:hover {
background-color: none:
text-decoration: none;
color: red;
}
/* for link where you dont want to change color on hover */
a:hover {
background-color: none:
text-decoration: none;
color: none;
}
When you want to override CSS values you can do two things: adding new CSS declarations after the one you want to override or using "!important".. So for your problem you can try:
a.reset:hover {
background-color: #FFFFFF;
text-decoration: none;
color: #000000;
}
.. and then add the links you want to override this new class:
<a href="#" class="reset">Link with reset</a>
But this CSS class must be declared after you normal "a" tag declarations or this won't work.
Another way is to use !important but I recommend not to abuse this one. But for overriding it's the fastest and safest way to be sure it will work:
a.reset:hover {
background-color: #FFFFFF !important;
text-decoration: none !important;
color: #000000 !important;
}
.. and this one you can add anywhere in your CSS file and any link with the "reset" class will get those styles: white background, no text decoration and black text.
Oh and for the background you cand try: background: none; and will clear all background styles.. background-color, background-image, etc
As a side note.. id's are used to reference a single element and it must be unique.. and classes are used to reference multiple elements. Multiple uses of the same id as you would use a css class.. you can brake javascript and it won't validate your HTML.
Yes but beware that a:hover{} should come before #what_we_offer a:hover {}.
I think if you do the reverse of what Pranav said, you can have less modifications i,e
/* for link where you ***DO*** NOT want to change color on hover */
.Link a:hover {
background-color: none:
text-decoration: none;
color: red;
}
/* for link where you want to change color on hover */
a:hover {
background-color: none:
text-decoration: none;
color: none;
}
so you need to add class for a href s in some particular DIVs
You can make use of CSS selectors. The best thing I think you can do is to use the selector not. Let me show you an example:
<html>
<head>
<style type="text/css">
a:not([not_custom]){
background: #00FF00;
color: #FF0000;
}
</style>
</head>
<body>
<div>
<a href="">Test 1</a>
<a href="" not_custom="">Test 2</a>
<a href="">Test 3</a>
<a href="" not_custom="">Test 4</a>
<a href="">Test 5</a>
<a href="" not_custom="">Test 6</a>
</div>
</body>
</html>
As you can see, I'm defining the a style using the not selector. So, I'm saying that I want to put a green background and a red color to all the a that doesn't have the attribute not_custom. As a result of this, you can see that Test 1, Test 3 and Test 5 will have the style defined and Test 2, Test 4 and Test 6 will be normal, without the style.
NOTE: you can define the attribute you want. You don't have to named not_custom. It can be called whatever if you want.
a:hover {
background-color: none:
text-decoration: none;
color: none;
}
This is correct.
If you want only particular page, add
body-id a:hover {
background-color: none:
text-decoration: none;
color: none;
}
加载中,请稍侯......
精彩评论