So I want to add 2 hover images to my site, yet when I do this, I get a black border cut through the middle of the images and this is due to me having hover on link effects. Here is the code
a:hover,a:active
{
color:Black;
outline:ridge;
text-outline:#000;
text-decoration:underline;
font-size:20px;
font-style:italic;
font-style:bold;
}
I tried this code from a similar question on stack but it worked to no avail.
a:hover img {
a img:hover{border: none !important;
}
The code you tried doesn't seem properly formatted. Try this.
a:hover img, a img:hover{
border: none !important;
}
It is usually a good idea to avoid !important. In this case you can just give your images and anchors a class or id and apply the CSS rules you want.
HTML:
<a class="link" href="#">Some link</a>
<img class="image" src="">
CSS:
.link:hover, .link:active {
color:Black;
outline:ridge;
text-outline:#000;
text-decoration:underline;
font-size:20px;
font-style:italic;
font-style:bold;
}
.image:hover {
border: none;
}
I would avoid having such aggressive styles on all a tags site-wide...it will cause lots of headaches like this. Try wrapping your text in p tags for tighter control, or giving either text or images a class like #mrkou suggests.
FIDDLE: http://jsfiddle.net/Xs4tn/
p a:hover, p a:active {
color:Black;
outline:ridge;
text-outline:#000;
text-decoration:underline;
font-size:20px;
font-style:italic;
font-style:bold;
}
Related
I'm trying to create a guitar-related website and learn html and css in the process, but I've ran into a problem: I've created a list where all the elements are links and I'd like for them to be white but turn yellow when hovered over. I can't seem to accomplish both of these objectives at the same time. Either they're always white or they turn yellow when hovered over but otherwise stay purple.
I've tried creating the hover function as an id (using it only once, as you do with id's), creating a div with all the necessary classes, inserting the hover function into the ul list or into each of the list elements or into the link descriptions. Nothing has worked so far.
HTML and CSS (separate files):
<div class="ul2 alink1 ahover1 avisited1">
<ul>
<li><a href="https://en.wikipedia.org/wiki/Electric_guitar" target="_blank"
>Electric guitars</a></li>
<li><a href="https://en.wikipedia.org/wiki/Acoustic_guitar" target="_blank"
>Acoustic guitars</a></li>
<li><a href="https://en.wikipedia.org/wiki/Semi-acoustic_guitar"
target="_blank" >Semi-acoustic/semi-hollow guitars</a></li>
<li><a href="https://en.wikipedia.org/wiki/Guitar_synthesizer#MIDI_guitars"
target="_blank" >MIDI-guitars</a></li>
</ul>
</div>
</body>
.body {
background-color:black;
}
.alink1 a:link {
text-decoration:none;
font-size:26px;
font-style:italic;
color:white;
}
.ahover1 a:hover {
color:yellow;
}
.avisited1 a:visited {
color:white;
}
.ul2 {
list-style-type:circle;
color:white;
}
When it comes to pseudo selectors, they work in a specific order. So the the hierarchy is as follows:
:link
:visited
:hover, :focus
:active
What you want to achieve can be done with these simple modifications:
.alink1 a {
text-decoration:none;
font-size:26px;
font-style:italic;
color:white;
}
.ahover1 a:hover {
color:yellow;
}
Remove the a:visited selector from your CSS as it's not needed, remove the a:link and have it as an a tag only.
I believe this is what you are after.
There is a problem that i can't solve.
I am trying to make button from text by changing it on hover. I am using css to change their font color or background color on hover. There is no problem to this point.
But when i give them a link <a href="www.twitter.com"> I have a problem because at this point my css doesn't work because of html's link hover and visited functions.
The big problem is visited .. i don't want the visited color to work. If visited color works, my links doesn't look like good.
If you can help me about links in texts (making hover) without problem of active section...
Thanks
By giving the link ("a") the css propertie text-decoration:none; the element wont use the underline and visited color any more.
a{
text-decoration:none;
color:white;
}
a:hover{
color:red;
}
div{
background-color:#000;
}
http://jsfiddle.net/7rrruajb/1/
Hope this is what your looking for.
a:visited{
text-decoration:none;
}
Just use a instead of a:link - a applies to unvisited and visited link, a:link just unvisited ones.
Compare the two:
a:link
a:link {
color:red;
}
a:hover {
color:white;
}
<div style="background-color:#666">
hello
</div>
a
a {
color:red;
}
a:hover {
color:white;
}
<div style="background-color:#666">
hello
</div>
I'm currently having a text as hyperlink and on this some CSS code is getting applied. Due to which on hover the text got underline and font gets bold on hover event. But now what I want to do is remove the hyperlink and apply the same effect bydefault i.e. not on hover. In short I want to apply the style currently applying on hover without hovering the text. My HTML and css code is as follows:
.faq .section p.quetn a:hover {
text-decoration:underline;
font-weight:bold
}
<p class="quetn">5.14 Where do i see my test results?</p>
One more important thig is I can't change the above written CSS, I want to override the above CSS code by writing a new class. Can you help me in achieving this? Thanks in advance.
Just use the same rule for when the link is not being hovered:
.faq .section p.quetn a, .faq .section p.quetn a:hover {
text-decoration:underline;
font-weight:bold
}
EDIT
Juse seen that you can't change the CSS for some reason.
Just create a new class with the same styles.
a.class, a.class:hover {
text-decoration:underline;
font-weight:bold
}
<a class="class" title="" href="#">Some Link</a>
EDIT v2
Do you want to style the text but remove the link markup?
It would just be
<p class="class">Text</p>
p.class {
text-decoration:underline;
font-weight:bold
}
Like this
demo
css
.quetn a:hover {
text-decoration:underline;
font-weight:bold;
}
Then instead using
.faq .section p.quetn a:hover
use
.faq .section p.quetn a
If you are targeting only P tag instead of anchor tag, then use it as below :
.faq .section p.quetn
html
<p class="quetn newClass">5.14 Where do i see my test results?</p>
css
.quetn a:hover {
text-decoration:underline;
font-weight:bold;
cursor:default;
}
.newclass a:hover{
text-decoration:none; !important
font-weight:bold; !important
cursor:default; !important
}
Use !important for priority.
Code below for Hover Enable
a:hover {
background-color: yellow;
}
Code below for Hover Disable
a:nohover {
background-color: yellow;
}
Site navigation html:
<div class="main_nav">
<div>Home</div>
<div>Company</div>
<div class="active">Franchise</div>
</div>
When a link is hovered it gets a specific background color.
My question is, how can I keep this hover state while the clicked page is loaded and the old is still displayed? I mean you hover a link item, the background changes, you click the background changes to default and the new site starts loading.
This is not necessay when the new page is loaded fast so you not really see the difference. However I am curious to know if this is possible with just css techniques.
Any ideas?
My css:
.header_wrapper .main_nav div a:link{
display:block;
text-decoration:none;
color:#f5f5f5;
}
.header_wrapper .main_nav div.active a:link{
color:#f5f5f5;
background: url(images/layout/main_nav_bg_hover.png) repeat-x;
}
.header_wrapper .main_nav div a:hover{
color:#f5f5f5;
background: url(images/layout/main_nav_bg_hover.png) repeat-x;
}
.header_wrapper .main_nav div a:focus{
color:#f5f5f5;
background: url(images/layout/main_nav_bg_hover.png) repeat-x;
}
Hey now used to focus properties as like this
a:focus{
// css properties
}
Live demo
Try like this..
If you are having a class for your <a> tag than use this :
a.classname:focus {
color: /*whatever you want*/ ;
}
If you want to apply all <a> than use this :
a:focus {
color: /*whatever you want*/ ;
}
try this:
<div class="<?=($_REQUEST['args'] == 'franchise')?'active': ''?>">Franchise</div>
<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>