how to set menu to activate always hover effect on [closed]

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

Updated fiddle http://jsfiddle.net/zxm3wgj2/2/ <div class="main"> <div class="banner_image">banner 1</div> <div class="banner_image ">banner 2</div> <div class="banner_image ">banner 3</div> </div> try nth-child(2) // to select in between element first-child // to select first...

Instead of using content on a non-pseudo element you should use background-image instead. I've updated your fiddle But it would go like this: .icon-search { background-image: url(https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/add-128.png); background-size: 100%; width:...

js Find Class Within Div + toggle CSS/Hide One Show Other

Use this, $(document).ready(function() { $('.button').click(function() { var next = $(this).next('.inner'); next.toggle(); $('.inner').not(next).hide(); }); }); Demo Fiddle Or CSS method, $(document).ready(function() { $('.button').click(function() { var next = $(this).next('.inner'); var cssState =...