How To Make The First Menu Link Look As If It Is Hovered Until Hovering Another Link

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

Solution 1:

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:

ulli:hoverli
{
   ...
}

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:

jQuery( document ).ready(function() {

   $('.home-gallery a').hover(
     function() {
       $('.mofet-link').removeClass( "active" );
       $('.mofet-link img').removeClass( "active_img" );
     }, 
     function() 
     {
       $('.mofet-link').addClass( "active" );
       $('.mofet-link img').addClass( "active_img" );
     });
});

you must also modify your css, adding some rules:

.active_img, .mofet-link:hoverimg {
    display: block !important;
    max-height: 250px!important;
    max-width: none;
    right: 220px;
    top: 20px;
}


.active, .mofet-link:hover {
    background-image: url("http://www.israelijewel.com/websites/mishne-torah/wp-content/themes/twentyfourteen-child/images/gallery/mofet-button.jpg");
    background-position: right 4px top 6px;
    background-repeat: no-repeat;
    margin-bottom: 0;
    margin-top: 0;
}

And, in order to correctly run jQuery, put it in HEAD section of the page. For example:

<scripttype="text/javascript"src="http://code.jquery.com/jquery-latest.min.js"></script>

Solution 2:

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:

<div class='home_gallery'>
  <divid='buttons'><aclass='mofet-link'href='mofet'><img....></a><!-- the rest of the a tags --></div></div>

css:

.mofet-link {
  //set the state you want initially, like when the mose hover over it
}
#buttons:hover .mofet-link {
  //set the state as NOT hovered
}
.mofet-link:hover {
  //set the state as hovered
}

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:

.mofet-link:hover {
  background: your_background !important;
}

or write a more precise selector if you have some other css overriding what you want with more priority.

Hope that helps.