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.
Related
Looking at this example:
https://www.w3schools.com/howto/howto_css_subnav.asp
I would like to make the submenu disappear on click without using Javascript. Is this possible?
It can be made to appear on hover without JS. The idea would be to hide the submenu once a submenu item is clicked. For example:
If you click "Package" the entire submenu and red background should not be shown.
EDIT 1:
I should add that I experimented using :has and :target in various combinations to set change it to display: none. That did not work.
I think that technically the answer to your question is yes, it is possible, but actually no - at least not in a way your page will continue functioning normally afterwards. Let me explain:
If you were to use anchor elements for our subnav links/buttons you could use a combination of the the :visited and :has pseudo classes to set the submenu's display to none (display: none;) and the main menu's color to the original color. However, I believe this will mean you won't be able to make the submenu appear again unless you were to somehow cancel the "visited" status of the anchor element that was clicked which if possible, will most certainly include the use of JS anyway...
I need to style an icon button with 3 different border colors, one for regular state, one for on hover, and another one for when the icon is clicked. I am using react, and right now I have a function that checks if the current button is the one that is selected and that works for regular and on clicked, I also added the onHover color but if that button is the on that is active you can't tell because on hover takes over, you can't see the clicked border until you move the mouse away. How to go about this?
you need 3 style declarations
.button {}
.button:hover {}
.button.selected{}
If you write them in exactly this order, then the button's selected style won't overridden by hover as the declaration for selected comes after declaration for :hover state and won't be overridden by it.
It's tough to tell without seeing your code, but it seems like you want both borders for active and hover states to show at the same time.
Since you can only have one border on an element at a time, one state will always overwrite the other.
There are some effects you can use with other CSS properties so that users can tell when a button is both active and being hovered:
outline - outline is similar to border and the two can exist at the same time (outline will probably only work if the buttons are rectangular because it doesn't adhere to border-radius)
box-shadow - this could be an easy way to add a hover effect underneath the element and its border
pseudo-element - This one is more complicated but adds the most flexibility - perhaps adding a ::before or ::after element to the button, positioning it absolute behind the element, and have that behave separately based on whether the button is active or hovered.
I usually use CSS's :hover feature along with the framework (e.g. react)... there are some good examples online where this feature doesn't just change color, but present some type of animation to help the link/button stand out:
https://www.proglobalbusinesssolutions.com/css-hover-effects/#:~:text=A%20CSS%20hover%20effect%20causes%20a%20graphical%20interface,on%20the%20web%20page%20and%20improve%20site%20interactivity
You might also consider this answer: How can I access a hover state in reactjs?
Considering the following:
<a tabindex="0" href="">With TabIndex</a>
Without TabIndex
https://jsfiddle.net/uLg7jyo9/1/
Mouse down on first link move away and mouse up, you will notice the blue border is still there.
do the same on the second link and you will notice it is not.
I want tab index to affect tab events not click events. How can I fix this?
Note: Firefox seems to treat them both the same.
a{
outline:none
}
add this style
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
Within Twitter Bootstrap there is a selection of buttons that one can choose from (as seen here: http://twitter.github.com/bootstrap/components.html). For our project, we opted to use a yellow color that was not included in the default set. A simple matter to simply create a new css class which included the colors I wanted. However, when the button is pressed in, the background color returns to the default grey background color instead of a like-background color as is seen with the other buttons on click. Did I miss something during the creation of the button?
example of issue (taken in FF):
You need to specify your new color with the :active pseudo selector. When you press a button it gets "active" and the :active selector kicks into play. When you release the mouse button the element stops being active and the element style reverts back to normal. Sort of like the :hover pseudo selector, when you're hovering the pointer over something.
i found this question via google.
recommend a article,must do some help
http://rubysource.com/how-to-customize-twitter-bootstrap%E2%80%99s-design-in-a-rails-app/