Как сделать так, чтобы первая ссылка меню выглядела так, как будто она зависла до тех пор, пока не появится другая ссылка

0

У меня есть меню, которое изменяет фоновое изображение ссылок при наведении курсора, а также заменяет для каждой ссылки центральное изображение в "кадре" этого меню. Мне нужно сделать первую ссылку в меню, как если бы он зависал все время, и его центральное изображение также показывалось, но оно должно быть отключено, когда оно зависает с одним из других ссылок меню. Есть идеи?

  • 2
    предоставить код или ссылку на скрипку
  • 0
    Пожалуйста, отправьте код, что у вас есть?
Показать ещё 3 комментария
Теги:
hover

2 ответа

0
Лучший ответ

В общем, вы не можете управлять родительским элементом только с помощью 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>
  • 0
    Меню не является многоуровневым, есть одна ссылка на каждую категорию, которую вы можете увидеть по следующей ссылке: israelijewel.com/1.html
  • 0
    Вы не можете сделать это с чистым CSS с реальной структурой HTML. Если вы хотите поддерживать фактический HTML, вы должны использовать JQuery для добавления / удаления определенного класса в первом пункте меню при наведении курсора на другой. В качестве альтернативы, если вы не хотите использовать Jquery, вы должны изменить свой HTML-код, поместив все остальные ссылки внутри первого LI, сделав ваше меню (структурно) многоуровневым меню. Затем вы можете добавить CSS, чтобы отображать их как сейчас, но backstage - это вложенное меню. Это не чистый HTML-код .... но он будет работать, если вы не хотите использовать jQuery.
Показать ещё 10 комментариев
0

Идея: обернуть все кнопки внутри нового 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, переопределяющий то, что вы хотите, с большим приоритетом.

Надеюсь, это поможет.

  • 0
    Не могу дождаться, чтобы исправить это уже с вышеупомянутым решением. Большое спасибо в любом случае, и я рассмотрю ваше предложение кода.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню