When I hover over a clickable link on my homepage, the styling changes as expected (i.e. the border becomes blue or the link has text-decoration). However, when I click the link to open in a new window (either it has target=_blank set or if I command + click the link), that link's styling persists until I click elsewhere on the page.
Why does the styling not revert back immediately?
Here are a few things I've tried:
a, a:link, a:active is set to text-deocration: none;. On hover, I've put a bottom border instead of changing text-deocration to underline.
a:hover, a:focus {
border-bottom: 1px solid blue;
}
I've tried playing around with a, a:visited, but as I read, I cannot change text-decoration. https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector
I've ensured that Google Analytics tracking returns true and that it's not stopping event propagation.
To note, I'm using Bootstrap.
Would appreciate some other idea. Thanks.
When you click on the link it becomes focused. Change your second CSS rule to remove the a:focus.
a:hover {
border-bottom: 1px solid blue;
}
Related
So I have a navigation bar using standard Bootstrap 3 classes and structure, recently I wanted to see if you could open the drop down menus on hover.
I did some searching and found this snippet:
.dropdown:hover .dropdown-menu{
display: block;
}
This opens the menu on hover, which is great (without having to toggle .dropdown-toggle
My issue is that my .dropdown-toggle has a focus state, which only happens when focus is given to the element, so when I hover and the menu opens my hover state is never applied, as I do not have to click on the top menu item anymore.
So the question is: is there a way to force the :focus state when :hover is active?
I tried to do this:
.dropdown:hover #home .dropdown-toggle:focus{
background: #00aaff;
border: #00aaff 1px solid;
}
So basically on hover add styles to the focus, but I think what I actually need to do is add the :focus class on :hover so is this more a JavaScript thing?
$(".dropdown").hover(function(){
$('#home .dropdown-toggle').focus();
});
And in css
#home .dropdown-toggle:focus{
background: #00aaff;
border: #00aaff 1px solid;
}
when the focus is on, the css gets apply.
I see it as 'a JavaScript thing'. You can attach a 'mouseover' event to the menu, which, when triggered, will change the menu's CSS and the CSS of the .dropdown-toggle element.
I do not think it makes a lot of sense to trigger "focus" state for CSS modification if you are using JavaScript (in this particular example, I will use JQuery library).
A simple example: https://jsfiddle.net/matu2vd6/5/
HTML:
<div class='dropdown'>My dropdown element.</div>
<div class='dropdown-toggle'>My dropdown-toggle element.</div>
JS/JQUERY:
let dropDownEl = $(".dropdown");
let dropDownToggleEl = $(".dropdown-toggle");
dropDownEl.on("mouseover", function() {
dropDownToggleEl.css({"background": "#00aaff",
"border": "#00aaff 1px solid"});
});
dropDownEl.on("mouseout", function() {
dropDownToggleEl.css({"background": "transparent",
"border": "none"});
});
This is kind of tricky. I'm using this js effect that changes my navigation color as you scroll through different sections. So when you scroll past the section with the class "green" it changes the hover border color of my nav. This is usually how it's done
.midnightHeader.green a:hover {
border: 3px solid #2b5999;
}
the problem is, I have other links in my header which I don't want to apply this to. So I only want to style the links inside the unordered list items, but the following code doesn't work.
.midnightHeader.green nav ul li a:hover {
border: 3px solid #2b5999;
}
Basically would I style the "nav ul li a:hover" inside ".midnightHeader.green"
Please have a look at midnight.js it explains how this works
Can anyone help me work this one? Thanks
Can anyone tell me why button focus borders are rendered with a black dashed border by default in IE11 and with a blue solid border in Chrome? You can see this if you go to http://angular-ui.github.io/ and tab over the Site/Code buttons with IE11 and Chrome.
I've tried various overrides like -webkit-appearance:none etc to no avail. Is this an AngularUI bug, or a browser quirk everybody knows about and have been working around that I'll need to special-case if I want the look to be uniform?
When you tab over the button, you are applying the element's :focus styling. Looking at the stylesheet which is being used, I cannot see any custom styling for this, so the browser is providing it's default focus styling.
If you want to override this, then you can write your own focus style. So for this particular button, you can use:
a.btn.btn-primary.btn-large:focus{
outline: 0;
/* add other styling to it */
}
Or if you want to just target all anchors on the page, then use
a:focus{
outline: 0;
}
Angular is adding the dotted lines on this occasion - to remove, do this in your CSS;
.btn-group > .btn:hover, .btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active {
outline: 0;
}
I have the following html and css:
http://jsfiddle.net/5hX6S/
The idea is to have a list of items which are links and then when the user scrolls over the list item it lights up in a different color and the color of the text inside changes to white.
You can see how it all looks in the jsfiddle above, my problem is that the whole item's background does change into orange but the text does not. The text only changes if you scroll directly above it, which is not enough. I'd also like to make the whole list a link, not just the text inside of it.
I tried putting a div, span, nothing inside of the list and moving that class that you see around using the following css:
.side_menu_link:hover {
background: #ff7200;
color: #fff !important;
}
But nothing works. The only thing that succeeded so far was moving the 'a' tags outside of the 'li' tags but as far as I'm concerned that's not the right way to do it syntax wise. So any suggestions?
Here you are
http://jsfiddle.net/iamnotsam/5hX6S/4/
You needed to replace this
a:hover {
text-decoration: none;
color: #fff;
}
with this
#left_menu ul li:hover a {
text-decoration: none;
color: #fff;
}
Are you trying to have the hover effect on the link? Or the list itself? If you want the link to change color on hover then in your CSS have
.side_menu_link a:hover {
color: color;
}
etc.
You want
.side_menu_link:hover a { ... }
^^^--- note this
instead, so that the new background color applies ONLY to the <a> tag, not the entire <div class="side_menu_link">.
a:hover{color:red;background:green}
Home
I am using a WordPress plugin which creates the following output:
<li>
<img src="/media/image-thumbnail.png"/>
Post Title
</li>
I applied an a:hover style for both the image and the text. But of course they are triggered separate of each other, as there are two links being generated. I would like to have them triggered both on hover (in my case: image border color changes and text color changes - no matter which of the two elements are being hovered).
Of course I could fiddle into the plugin source and change how it is built there, but due to update-ability I thought it would be cleaner to change it with a few lines of jQuery. Unfortunately I don't know how to approach this and would be thankful for ideas!
Add the hover on the li
FIDDLE
li:hover img
{
border: 2px solid green;
}
li:hover a
{
color: orange;
}
With Jquery you could use the hover function.
Something like this
$('.wp_rp_thumbnail, .wp_rp_title').hover(function(){
$('.wp_rp_thumbnail img').css({"border":"1px solid #fff"});
$('.wp_rp_title').css({"color":"#fff"});
});