У меня есть меню, которое изменяет фоновое изображение ссылок при наведении курсора, а также заменяет для каждой ссылки центральное изображение в "кадре" этого меню. Мне нужно сделать первую ссылку в меню, как если бы он зависал все время, и его центральное изображение также показывалось, но оно должно быть отключено, когда оно зависает с одним из других ссылок меню. Есть идеи?
В общем, вы не можете управлять родительским элементом только с помощью css, поэтому вам нужно сделать какой-то трюк:
Например, если у вас есть многоуровневое меню, вы можете сохранить стиль, применяемый к элементу отца, просто написав что-то вроде этого:
ul li:hover li
{
...
}
Таким образом, если предположить, что курсор мыши на вложенном LI, применяется стиль также к отцу, например, основной элемент списка в основной строке.
Если у вас нет многоуровневого меню, вы можете в любом случае объявить его в html и стилизовать все, чтобы отображаться как все равные ссылки уровня, просто чтобы достичь своей цели ;-)
ОБНОВЛЕНИЕ ПОСЛЕ КОММЕНТАРИЙ Здесь 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" );
});
});
вы также должны изменить свой css, добавив некоторые правила:
.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;
}
И, чтобы правильно запустить jQuery, поместите его в раздел HEAD страницы. Например:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
Идея: обернуть все кнопки внутри нового div, когда вы наводите курсор на этот div, удалите стиль первой кнопки, ЕСЛИ вы не наведете первую кнопку, а затем просто нарисуйте каждую кнопку, как вы хотите, при наведении
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
}
Теперь значением по умолчанию будет значение, указанное в правиле.mofet-link (зависание), когда вы наводите курсор на любую кнопку, css будет тем же, что и на кнопке #: hover.mofet-link (unhovered), если вы не находитесь зависание mofet-link, тогда применяемые правила будут.mofet-link: hover (hovered)
Вы можете немного поиграть с ордером или использовать что-то вроде:
.mofet-link:hover {
background: your_background !important;
}
или напишите более точный селектор, если у вас есть еще один css, переопределяющий то, что вы хотите, с большим приоритетом.
Надеюсь, это поможет.