how to set menu to activate always hover effect on [closed]
Tags: html,css,design,menu,opencart
Problem :
How to set menu to always have the hover effect on without going over it with your mouse. I have a design issue as seen in the link. I really love the design but i cant fix this issue by changing the image.
So if you look in the image you will see a white background around the text, now it is readable. I would like it this way for all buttons even when the mouse is not hovering over the button.
Bonus fix: It would be nice to then maybe implement another hover.
Extra info: Reason i need to do fix this in the code is because i am working with opencart and want the client to keep the option of adding, removing or moving links in the menu.
LINK: http://imgur.com/owmuTyE
I think this can be solved by using CSS but i cant figure out the way of approaching this problem.
Edit: instead of downvoting why not explain an approach, i do not neccesarely need code. But here is the code, its a simple opencart menu. Apparantly i dont know how to do this and am obviously looking for an "approach" or something like: #menu { hover: on } , a function i do not know yet.
#menu {
border-bottom: 1px solid #000000;
height: 50px;
margin-bottom: 15px;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
padding: 0px 5px;
background-image: url(../../../../../../geschenkenpakket/repakkettenuitgelichtenbtwvoltooing/menu/menu.png);
#menu > ul > li:hover > a {
background: #000000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
Solution :
Not sure whether this will solve the problem, but certain element states could be also set by classes. This :hover
state therefore could be also simulated by adding a class hover
to that <li>
element and defining this class behavior in CSS.
In your case you could do this - change
#menu > ul > li:hover > a {
into
#menu > ul > li:hover > a,
#menu > ul > li.hover > a {
and add a class hover
to the <li>
element you want to have the hover on it:
<li class="hover">
If you'd like to have a different hover behavior, then just change
#menu > ul > li:hover > a {
into
#menu > ul > li.hover > a {
and define new CSS styles for
#menu > ul > li:hover > a