При наведении на одно изображение сменить еще 2 изображения

У меня есть навигационная панель глупой формы, и ее невероятно сложно использовать при наведении курсора мыши.

В принципе, когда я наводил курсор на кнопку, я хотел бы, чтобы 2 изображения с обеих сторон менялись, а также изображение, над которым зависает мышь. Это возможно?

Мой код навигации:

<div align="left" id="navbar">

<ul class="navbarlist">
    <li><a href="news.html"><img src="images/news.png" onmouseover="this.src='images/newshover.png'" onmouseout="this.src='images/news.png'"></a></li>
    <li><img src="images/newsspace.png"></li>
    <li><a href="print.html"><img src="images/print.png"onmouseover="this.src='images/printhover.png'" onmouseout="this.src='images/print.png'" ></a></li>
    <li><img src="images/printspace.png"></li>
    <li><a href="design.html"><img src="images/design.png" onmouseover="this.src='images/designhover.png'" onmouseout="this.src='images/design.png'"></a></li>
    <li><img src="images/designspace.png"></li>
    <li><a href="contact.html"><img src="images/contact.png" onmouseover="this.src='images/contacthover.png'" onmouseout="this.src='images/contact.png'"></a></li>
    <li><img src="images/contactspace.png"></li>
    <li><a href="http://crookedcartoon.bigcartel.com/"><img src="images/shop.png" onmouseover="this.src='images/shophover.png'" onmouseout="this.src='images/shop.png'"></a></li>
    <li><img src="images/navend.png"></li>
</ul>   

</div>

По существу (надеюсь, это имеет логический смысл):

При наведении курсора на «images/news.png» я бы хотел, чтобы «images/newsspace.png» также изменился.

При наведении курсора на «images/print.png» я бы хотел, чтобы «images/printspace.png» изменился, НО ТАКЖЕ «images/newspace.png» изменился, но на другое изображение, чем когда я навел курсор на «images/news.png». ' ранее.

Это возможно? Я предполагаю, что это потребует некоторого сложного диапазона; классы noshow и тому подобное, но может ли кто-нибудь сказать мне, с чего хотя бы начать?

РЕДАКТИРОВАТЬ---------

Используя предложение Джонатана Jquery, я добавил класс к каждому из моих изображений, чтобы упростить их идентификацию для сценария, однако проблема, которую я вижу сейчас с функцией постепенного появления/исчезновения, заключается в том, что изображение уже должно быть на странице, чтобы этот сценарий мог нацельтесь на это.

$(document).ready(function(){
$("ul.navbarlist li:img.news").hover(
  function () {
    $(this).fadeOut
    $("ul.navbarlist li:img.newsspace").fadeOut
  },
  function () {
    $(this).fadeIn
    $("ul.navbarlist li:img.1a").fadeIn
  }
);

Эта проблема в том, что я исчезаю в img.1a, но его нет на странице (только в папке с моими изображениями), поэтому я не могу дать ему класс для сценария, из которого он будет нацеливаться.

oi39.tinypic.com/2ns9tvl.jpg Вот изображение, чтобы продемонстрировать, что я надеюсь достигать!


navigation jquery css hover onmouseover
person CrookedCartoon    schedule 29.06.2013    source источник
comment
Лучше всего сделать это с помощью eventListeners. Если вы хотите использовать такую ​​библиотеку, как JQuery, это очень просто.   -  person Jonathan    schedule 29.06.2013
comment
Я все равно буду использовать jquery при создании остальной части сайта, я посмотрю на eventListeners. Спасибо за это.   -  person CrookedCartoon    schedule 29.06.2013

Ответы (3)


arrow_upward
2
arrow_downward

Кое-что, чтобы вы начали:

$("img").hover(
  function () {
    $(this).fadeOut("slow")
    $("ul li:last-child img").fadeOut("slow")
  },
  function () {
    $(this).fadeIn("slow")
    $("ul li:last-child img").fadeIn("slow")
  }
);

Скрипка

person Jonathan    schedule 29.06.2013
comment
Спасибо! Как настроить таргетинг на второе изображение, наведя курсор на первое? - person CrookedCartoon; 29.06.2013
comment
Используйте обход DOM, что легко сделать с помощью id или classes. См. редактирование. - person Jonathan; 29.06.2013
comment
Я разместил свой сценарий, и, к сожалению, еще одна проблема! - person CrookedCartoon; 29.06.2013
comment
oi39.tinypic.com/2ns9tvl.jpg Вот изображение, чтобы продемонстрировать, на что я надеюсь достигать! - person CrookedCartoon; 29.06.2013

arrow_upward
0
arrow_downward

CSS отвечает только с использованием псевдоэлементов

Вы можете сделать это, используя только CSS.

Для такого HTML (я изменил его, но в вашем случае он все равно будет работать)

<div class="item" id="item1"></div>
<div class="filler"></div>
<div class="item" id="item2"></div>
<div class="filler"></div>
<div class="item" id="item3"></div>
<div class="filler"></div>
<div class="item" id="item4"></div>

Установите этот CSS:

.item, .filler, .item:before, .item:after {
height: 100px;
float: left;
-webkit-transition: all 1s;
transition: all 1s;
}

.item {
width: 100px;
}

.filler, .item:before, .item:after {
width: 50px;
}

.item {
background-color: gray;
position: relative;
}

.filler {
background-color: lightgray;
}


.item:before, .item:after {
content: '';
position: relative;
opacity: 0;
}

.item:before {
right: 50px;
}

.item:after {
left: 50px;
}

.item:hover:before, .item:hover:after {
opacity: 1;
}

#item1:hover {
    background-color: sandybrown;
}

#item1:after {
background: linear-gradient(90deg, sandybrown, white);
}

#item2:hover {
background-color: lightblue;
}

#item2:before {
background: linear-gradient(270deg, lightblue, white);
}

#item2:after {
background: linear-gradient(90deg, lightblue, white);
}

#item3:hover {
background-color: lightgreen;
}

#item3:before {
background: linear-gradient(270deg, lightgreen, white);
}

#item3:after {
background: linear-gradient(90deg, lightgreen, white);
}

#item4:hover {
background-color: yellow;
}

#item4:before {
background: linear-gradient(270deg, yellow, white);
}

Большинство из них просто регулируют размеры.

Ключевая часть — изменение концепции. Вместо того, чтобы пытаться изменить элементы-заполнители при наведении курсора на соседний элемент, сделайте все в наведении элемента и создайте псевдоэлементы поверх элементов-заполнителей.

скрипка

person vals    schedule 30.06.2013

arrow_upward
0
arrow_downward

Я исправил проблему, используя функции jquery next() и previous()!

Вы можете увидеть результаты здесь:

wwww.crookedcartoon.co.uk/print.html

person CrookedCartoon    schedule 02.07.2013