My code loads various items on some button click event into the document.
I managed to set the focus properly on the first item from those freshly loaded items once there all have been displayed using the following code:
$(function () {
$("a.getfocus").focus();
});
This works but I would also like the browser's default outline to show up on this focused item.
Is there any easy solution to achieve this ?
With the :focus pesudoselector to the element and the outline property:
outline: [properties]
Say, you have a link which usually shows an outline on focus (yep, that's the default behaviour):
<a id="test" href="https://test.com">Test</a>
With CSS, you can do the following:
#test {
outline: 1px dotted red;
}
to get a red outline. Usually, you'd want to do:
a {
outline: none;
}
Back to your question, you can do:
a:focus {
...
// rules
...
}
You can see a small sample here.
Related
I've seen a lot of post with almost the same problem as mine but it is not working for me.
I would like to remove the hover property of my button upon clicking the said button before the remove event I have.
Edit: I have 3 buttons for this.
Edi2: I found a workaround for this. I manually set the button color upon clicking the button
$('button').on('click', function() { // when you click the button
$(this).addClass('no-hover-button'); // add the class 'no-hover-button'
});
button:not(.no-hover-button):hover { /* only apply hover styling when the button does not have the class 'no-hover-button' */
color: red;
}
like in your case
.btn-group button:not(.no-hover-button):hover {
background-color: #FFF6C3;
border: 1px solid grey;
}
You can't change or alter the actual :hover selector through Javascript.However, you can add an another class (new) and remove that class(new) onClick.
In a Html page and when the Tab key is pressed,the tabbed link gets highlighted,
is it possible to change the style of that highlight?
Yes, you can use the :focus pseudo class.
textarea:focus {
background: pink;
}
<textarea>
Test content
</textarea>
You can change the style by using the :focus pseudo selector. I've created a CodePen to show you: https://codepen.io/JosephAllen/pen/aabppo
You may want to disable the browser's default :focus state too:
a:focus {
color: green;
outline: none; // Removes Chrome's default blue border
}
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"});
});
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 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"});
});