on this site:
http://www.dogslife.org.il/
when passing the focus with the TAB button when it gets to the menu area and go threw the button the menu dosn't open.
any suggestions on how to make itopen like it dose here (same theme):
http://www.magic-glass.co.il/
Add :focus to your CSS where you use :hover, that will trigger it when it's focused with tab
Related
I've got a button on my homepage www.example.com pointing to the page B -> www.example.com/page-B
I'm using CSS for the :hover state, so when I hover over the button on the homepage, it turns red.
But what I'm trying to achieve is that the button turns red and stays red when it's clicked and reaches the target page www.example.com/page-B
I was hoping to get it done with either :active or :focus states, but that won't work.
How can I achieve this?
When a button is clicked focus goes to that button. So the styles in button's :focus pseudo-class is applied. But as soon as user clicks another button or change the focus by hitting the tab key, your button lose it's state of "focus".
One option available is using the :visited pseudo-class. You need to wrap your button around anchor tag(<a></a>). Assume you gave a class .link to the anchor tag.
<a href="https://example.com/page-b" class="link">
<input type="button" value="next page" />
</a>
Then the css should be,
.link:visited > button {
color: blue;
}
Notice that I targetted child elements which are buttons under anchor elements. I did that because buttons don't have a :visited pseudo-class which you can use directly. But, according to MDN,
For privacy reasons, the styles that can be modified using this selector are very limited.
So I don't think you can use this approach to make you background red (I tried but doesn't worked). Also, even user revisited your site or reloaded the page, you button stay, ":visited" styled once the user visit the link as that's the way anchor element works.
My suggestion is you should use javascript here. I don't know about wordpress much and I don't know whether you can use js in wordpress or not. But usually you may have the ability to use <script> tag even in wordpress.
My approach...
function nextpage() {
window.open("https://www.example.com/page-b", "_blank");
document.getElementById("next").style.backgroundColor = "red";
}
<input type="button" value="next" onclick="nextpage()" id="next" />
Even I put a snippet it won't work in stackoverflow maybe due to security policy but this should work in real life. I open "example.com/page-b" in a new tab as I opened it in the same tab
"example.com" tab will be closed and when user reopen the tab, button's styles will get lost.
If you want to persist button's red background, then use js, set a cookie when user click the button and style the button as visited if the cookie exist when user reload the page.
I am currently using a Bootstrap 4.1 button with the class being .btn-outline-primary. In its regular state, the button has a white background with blue text. However, when you hover over the button, the colors are inverted such that the background is blue and the text is white.
The active state of this button is only a highlighted border (with button styling the same as inactive state - white background blue text) and I would like to make it so that when the button is clicked, the button remains in the same style as when the button is hovered.
However, I do not have access to the hover class of the button since it is a bootstrap button and I am wondering how I can achieve this? Here is the button:
<button class='btn btn-outline-primary max-w-250 mx-1 my-1' type='button' id='MyButton' name='happyButton'>
<div class='d-flex flex-column justify-content-center align-items-center overflow-none'>
<div class='ButtonText line-height-16'>"Text Line One"</div>
</div>
</button>
I have tried using css styling using :focus to change the background color, however, this just over-powers the text since the text does not invert and the background now matches the text color.
.btn-outline-primary:focus{
background-color: #18f;
}
I'm not a huge Bootstrap user or I'd look up the relevant classes for you. Instead, I'll walk you through the steps to find them yourself using DevTools. I'll be using Chrome, but the steps are similar for Firefox and Safari.
In a browser (again, preferably Chrome) where the button is rendered, right click on that button. From the menu, select Inspect.
The box that comes up should be on an elements tab, displaying your html. Confirm that the button is highlighted in that display. If it isn't, click on the button's html to highlight it.
The right side of the newly opened box should be a pane describing the selected element, and should be on the Styles tab. Confirm that the css rules that you'd expect to apply to the button are there.
Near the top of that pane, next to the filter box, there is a small button labeled :hov. Clicking that button displays the various pseudoclasses, like :hover, that can be applied to your element. Check the :hover checkbox.
The :hover rules should now display in the css rules list below. Find the relevant declaration (.btn-outline-primary:focus or something similar) and copy the rules it contains. You can then, in your own css, write
.btn-outline-primary:active {
[whatever rules you copied]
}
I have two addenda:
If that doesn't work, go through the first four steps again, this time selecting the :active pseudoclass. If the rules you added are showing up in your rules list (they may be way down!) but aren't working, you have an issue with css specificity and should look that up
I have written this assuming that, when talking about an active button, you were using the term in the technical css sense, which is a change that only lasts so long as the button is held down. If you want the button to change permanently after it is clicked, you will need to use something outside of css: either use some Javascript to update the classes on the button or change it up and use a checkbox
I'm having some trouble with anchors on my page. When I am on the page, and click on an anchor in the dropdown menu "Our services" it goes to the right place. But when I click on the logo "NCK", and then click on one of the anchors in the dropdown menu, it doesn't go to the right place? How can that be?
Link to page, to see HTML and error
change link "/rwd/Our-services#projectmanagement" to "#projectmanagement" (doing this for all other links also)
OR
simply remove default event of all links of dropdown which has problem with this code
$('#yourdropdownlink1_ID').click(function(event){
event.preventDefault();
});
use above code for all dropdown links
Hovering effect on AdvanceDataGrid doest not appear if we take mouse cusor over the icon of item. any solution?
You can use a button inside your renderer and make use of these styles on button:
overIcon
downIcon
When I'm debugging a site, sometimes the hovered selectors are a little long winded and similar to other ones, is there a way to apply a kind of "sticky" state to hover rules in Firebug?
Example; I hover over a nav bar and want to copy the selector out of firebug to search in the CSS, but as soon as I move my mouse, the selector (obviously) disappears as the nav <li> isn't hovered anymore.
Any way to do this?
Thanks :)
When inspecting links, Firebug shows the default CSS state, i.e. styles applied to a:link. By default, the :hover and :active styles are not shown. Fortunately, you can change the state of the link by clicking Style and choosing the appropriate option:
For what I wanted, there's an option for it in the Style dropdown above the CSS styles for the element. Just click the dropdown, and select :active or :hover and it keeps the styles for the selected and hovered element :)
Sometimes items are not affected by the ":hover" state but by a mouseover in jQuery or similar, in that case you can manualy trigger the event (or force the event) in the console tab by writing:
$('#a-random-selector').mouseover()
Hope it helps, I came here looking for this answer but had to figure it out myself
You can try using Chrome inspector, and trigger :active :visited state etc.. on the element under styles.
Open both firebug and web developer->Inspector. In the Inspector window, locate the code line where the hover starts, right click the mouse and choose the :hover. Then the hover state will stay, you can do whatever you want in firebug.