I have a menu which changes the links background image on hover and also replaces for each link a center image in the "frame" of that menu. What I need to do is make the first link of the menu show as if it is hovered all the time and its center image show as well but it should be turned off once hovering one of the other menu links. Any ideas?
相关问题
- Views base64 encoded blob in HTML with PHP
- Is there a way to play audio on a mobile browser w
- HTML form is not sending $_POST values
- implementing html5 drag and drop photos with knock
- Adding a timeout to a render function in ReactJS
In general, you can't control a parent element with only css, so you have to do some trick:
For example, if you have a multi-level menu, you can retain style applied to a father element simply writing something like this:
In this way, assuming a mouse hover on a nested LI, will apply style also to father one, for example main list-item in main bar.
If tou have not a multi-level menu, you can anyway declare it in html, and stylize everything to appear as all equal level links, just to reach your objective ;-)
UPDATE AFTER COMMENTS Here the jquery Code:
you must also modify your css, adding some rules:
And, in order to correctly run jQuery, put it in HEAD section of the page. For example:
The idea: wrap all buttons inside a new div, when you hover over that div remove the style of the first button UNLESS you are hovering the first button, then just style each button as you want on hover
html:
css:
Now, the default value would be the one given by the rule .mofet-link (hovered), when you hover over any button, the css will be the one at #buttons:hover .mofet-link (unhovered), unless you are hovering mofet-link, then the rules applied will be .mofet-link:hover (hovered)
You can play with the order a little or use something like:
or write a more precise selector if you have some other css overriding what you want with more priority.
Hope that helps.