Как связать JavaScript при наведении на элемент, чтобы изменить изображение элемента и отобразить блок третьего элемента

Question

Как связать JavaScript при наведении на элемент, чтобы изменить изображение элемента и отобразить блок третьего элемента

0

Привет, ребята, я пытаюсь сделать что-то вроде слайдера, у меня есть 4 кнопки, которые при нажатии меня хотят изменить основное изображение и показать содержимое для каждого изображения, после небольшого просмотра и тестирования мне удалось получить изображение для изменения на hover, однако у меня возникают трудности с изменением содержимого div. Я пытался использовать дисплей none для других разделов контента и блокировать для активного, но я не могу связать все это, я мог бы сделать это,

    $('#changeImage').attr('src', 'pic1.png');
  },
       function() {
    $(".content.one").css("display", "block");
   },
        function() {
    $(".content.two").css("display", "none");
   },
        function() {
    $(".content.three").css("display", "none");
   },
        function() {
    $(".content.four").css("display", "none");
   }
)

однако изменяется только содержимое.content.one и только когда я выхожу из мыши. Надеюсь, что я ясно дал понять, что мой английский не так хорош, если я могу помочь прояснить все, что можно попросить.

вот весь скрипт java

<script type="text/javascript">
$(document).ready(function() {
    $("ul li:nth-child(1)").hover(
  function () {     
    $('#changeImage').attr('src', 'pic1.png');
  },
       function() {
    $(".content.one").css("display", "block");
   },
        function() {
    $(".content.two").css("display", "none");
   },
        function() {
    $(".content.three").css("display", "none");
   },
        function() {
    $(".content.four").css("display", "none");
   }
);

$("ul li:nth-child(2)").hover(
  function () {     
    $('#changeImage').attr('src', 'pic2.png');
  }
);

$("ul li:nth-child(3)").hover(
  function () {     
    $('#changeImage').attr('src', 'pic3.png');
  }
);

$("ul li:nth-child(4)").hover(
  function () {     
    $('#changeImage').attr('src', 'pic4.png');
  },
     function() {
    $(".content.one").css("display", "none");
   },
        function() {
    $(".content.two").css("display", "none");
   },
        function() {
    $(".content.three").css("display", "none");
   },
        function() {
    $(".content.four").css("display", "block");
   }
);

});
</script>

и весь html

<div id="wrapper">
<img src="clear.png">
<ul id="side-bar">
<li class="one"><a href="#"><img src="1-1.png"
onmouseover="this.src='1-2.png'"
onmouseout="this.src='1-1.png'"></a></li>
<li class="two"><a href="#"><img src="2-2.png"></a></li>
<li class="three"><a href="#"><img src="3-1.png"
onmouseover="this.src='3-2.png'"
onmouseout="this.src='3-1.png'"></a></li>
<li class="four"><a href="#"><img src="4-1.png"
onmouseover="this.src='4-2.png'"
onmouseout="this.src='4-1.png'"></a></li>
</ul>
<div id="image"><img id="changeImage" src="pic1.png"></div>
<div id="content-wrapper"><img src="content.png"></div>
<div class="content one"><p>content 1</p><a href="#" class="more">read more...</a></div>

<div class="content two"><p>content 2</p><a href="#" class="more">read more...</a></div>

<div class="content three"><p>content 3</p><a href="#" class="more">read more...</a></div>

<div class="content four"><p>content 4</p><a href="#" class="more">read more...</a></div>
</div>

Ivan Veselinov Nedelchev 20 сен. 2013, в 15:04

Источник

Теги:

javascript

jquery

html

javascript-events

1 ответ

Ещё вопросы

Neil Girardi · Accepted Answer · 2013-09-21T05-05-00.000Z

Вы неправильно используете.hover(). Hover выполняет две функции в качестве параметров: функцию, выполняемую при наведении курсора мыши, и функцию, выполняемую при мыши. Например:

$(function() {

    $('#my-id').hover(

        // mouse over
        function() {
            $('#foo').show();
            $('#bar').addClass('baz');
        },

        // mouse out
        function() {
            $('#foo').hide();
            $('#bar').removeClass('baz');
        });
});

В коде вы передаете четыре функции в качестве параметров вызова наведения, привязанного к элементу "ul li: nth-child (1)". Во всех ваших других обработчиках событий hover вы передаете только одну функцию.

очень полезный ответ, я действительно неправильно использовал .hover (), я не знал, что для функции снова и снова нужны две функции в качестве параметров, когда я меняю свои, когда меняю .hover () на .mouseover (), все работает как шарм :)