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...
Related
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?
I know there probably is, but here's the situation:
I have a mega menu with links in the tab. I'd like for the tab to show on focus when a link on the inside of the tab has the focus.
Most mega menus only work on hover. I've got the <li> to work on focus (because it's right before the that shows), using li:focus. But once you tab to the inside right after the <li> and the link inside of that, the <div> disappears.
I'm sure there's a way it can be done through jQuery, but I'm trying to avoid that.
Thanks!
You can't use css to select parent element, the only way is to use jQuery parent() method.
There is currently no way to select the parent of an element in CSS. This will probably be available in CSS4.
I have a project that I am working on for some simple CSS buttons, and I was trying to make a matching drop-down menu for them. The problem is that when I click an item in a sub-menu, all the parents above it go to the active state as well. I was going to use a parent selector, only they don't exist. Here is the demo page: http://jsfiddle.net/td7bk/4/.
Thanks!
Edit: For now, the demo is only fully compatible with Firefox, because it uses the -moz-transition and -moz-box-shadow property, and the border-radius property.
This is possible with just css if you are willing/able to adjust your html a tiny bit. I noticed you have a span tag wrapping text in a few li elements but not all of them so i wasn't sure if this was a requirement or not.
See http://jsfiddle.net/td7bk/8/ for an example.
Also, if you're in the mood for a quick tip, take a look at the adjusted css selectors. Simplified and more efficient.
Hope this helps!
So I've got a standard dropdown menu in my HTML. I've also got the background colored, and I have a background image that I want to use as a button.
But there's a problem, because I can't get the default button to disappear in Firefox. Even though I can get the button to disappear in Webkit using -webkit-appearance:none; I can't get it to go away in Firefox.
Here's an example: http://jsfiddle.net/wG7UB/
And I'd prefer not to revert to a heavily styled unordered list if at all possible. Thanks!
What do you exactly want to do?I'm not sure i understand fully what exactly you're trying to do
if you want to make it disappear then you can use "{display: none}"
or you can use "-moz-appearance" property if there is any.
Here I go answering my own question... I just wrapped my select tag with a div, and used a pseudo element to cover up the button. Slightly hackish, and I don't like using the pointless div, but I guess it works okay. Then I set the CSS of the pseudo element to pointer-events:none; so that it would allow clicks through the image.
Example: http://jsfiddle.net/howlermiller/nchUt/1/
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.