So I wrote this piece of code to get the hover effect but didn't get it quite right.
a:hover{
background-color: #306203;
}
To get the links highlited when I hover on them, but I get the space highlited too. How can I get just the words?
Thanks
You can try the following:
a:hover > span {
background-color: #306203;
}
<a><span>Features</span></a>
Related
I was trying to build a menu for a website, and I used this code:
nav#menu:hover li{
background-color: #606060;
}
However, when I hover over the list items on the site, the code changes the background color of every single one of them, not just the one I have my cursor on, does anybody know what I should do?
This should fix it
nav#menu li:hover { background-color: #606060; }
You had hover on entire menu and not its individual li tags.
I've seen the other question about this here but their solution did no work for me. When the mouse hovers over a hyperlink, a pesky red line appears underneath it. I've tried:
a:hover{
text-decoration: none;
border-bottom: none;
}
a {outline : none;}
.entry-content a {
border-bottom: none;
}
on Appearances->Customize->Additional CSS
on Appearances->Editor->style.css
also on the Slider Revolution Custom CSS because initially I thought this was an issue with the text in the slider, but later realized it's from the whole theme.
also on style.css:
every instance of border-bottom was commented out and replaced by border-bottom:none;
every instance of a:hover that had border-anything had that border commented out
every instance of box-shadow was commented out and replaced by box-shadow: none;
The red line keeps showing up when I hover. I don't know what else to do. I also asked someone to clear their cache and cookies and then refresh the website. The underline/border/box is still there. Is there anything else that could be causing this?
Based on the Scrawl theme preview, looks like it's an ::after so you can override it with this:
.comment-content a:after, .entry-content a:after, .comment-respond a:after, .site-footer a:after {
display:none;
}
Do keep in mind that for accessibility reasons you should probably keep an underline of some sort, but this :after seems rather odd, not sure why they didn't just go with text-decoration:underline instead.
smarter people than me!
I've been racking my brain for awhile with some css for this wordpress website On the navigation menu (Campus, National, World,...) I'm trying to do some custom css where when you hover your mouse over the menu items and they change color. Right now they only turn black except for the Campus menu item which changes to what I want for a moment then changes to black.
My attempt was to try this short css in the stylesheet, but it didn't work. I suspect I might have to adjust the upper-nested classes.
.menu-item-28 a:hover{
background:#1f61c4;
}
This is probably an easy question but my css-fu is pretty bad. Any help help is much appreciated!
Try changing your selector to
#menu-main-navigation li a:hover{
background-color:#1f61c4;
}
This will target any anchor (a) inside your main navigation (instead of only the one found under .menu-item-28 - ie. campus)
There is this CSS rule in the code
#nav nav > ul > li > a:hover {
background: #222222;
border-color: #222222;
color: #fff;
}
which causes the black background on hover. You probably can't change that, I suppose. But if you put another rule somewhere "later" (= below it) in the code, you can overwrite it with your own background color:
#nav nav > ul > li > a:hover {
background: #1f61c4;
}
Example page,
Accompanying CSS
Should be a fairly basic issue but for some reason I can't figure it out.
Basically I want the links in my navbar to have no underline or colour change and remain white.
Any idea where I'm going wrong?
It's because you're selecting the main .links element, but not the actual a elements inside. This should do the trick:
.links a {
text-decoration: none;
color: white;
}
Anyhow, I have a problem. A tiny problem I suppose, but one that's bugging me. I updated the CSS for my anchors on my blog, so that they were underlined with a border. Problem now is all my images that were linked are underlined, and it looks wrong.
So I assume the only way to fix this is to apply a CSS class to all the images inside anchors so that they have border: none;. I don't know how to do this though. Anyone willing to explain if this is even possible? Thanks in advance.
Try this:
<style type="text/css">
a img { text-decoration: none } // Images within
</style>
However, this is awfully general and if your anchors have padding, it won't work entirely, there may be residue underlining to the right and left of your image.
It would be better to turn underlining for links off in general, define a CSS class for your anchors, and turn underlining on in that class:
a { text-decoration: none }
a.my_anchor_class { text-decoration: underline }
Try this:
a img { border:none; vertical-align:top; }
It moves the underline to the top and underneath the image.
Underlining is controlled by the text-decoration CSS property. So if you want to turn that off:
a { text-decoration: none; }
In jQuery, you could use the has selector to add a class to all links that have an image inside them:
$('a:has(img)').addClass('image-link');
Then remove the border from those links in your CSS:
a.image-link {
border-bottom-style: none;
}
It would only work when JavaScript’s enabled though.