How to make the first menu link look as if it is h

问题:

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?

回答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:

ul li:hover li
{
   ...
}

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:hover img {
    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:

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

回答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'>
  <div id='buttons'>
    <a class='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.