Как открыть 1 div при наведении мыши на второй div?

0

Привет, я пытаюсь открыть один div с помощью мыши. Дисплей 1 по умолчанию не отображается, но когда пользователь наводит указатель на div 2, отображается div 1. Но это не работает. Мой код:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

    <style>
        .testtmpblock{
            display: none;
            background-color: black;
            height: 100px;
            width: 100px;
        }
        .tmpd{
            height: 100px;
            width: 100px;
            background-color: blue;
        }
    </style>

    <script>
        $(document).ready(function () {
            $(document).on('mouseenter', '.tmpd', function () {
                $(this).find(".testtmpblock").show();
            }).on('mouseleave', '.tmpd', function () {
                $(this).find(".testtmpblock").hide();
            });
        });
    </script>
</head>
<body>
<div class="tmpd">
    kjkjkj
</div>
<div class="testtmpblock">
    data
</div>
</body>
</html>

div testtmpblock будет отображаться при наведении div tmpd но он не работает.

Я также написал для него сценарий. Любое руководство, где я ошибаюсь?

Теги:

4 ответа

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

Вам нужно использовать next а не find поскольку find используется для desendants, и ваш необходимый элемент не является потомком.

Демо-версия

  $(document).ready(function () {
      $(document).on('mouseenter', '.tmpd', function () {
          $(this).next(".testtmpblock").show();
      }).on('mouseleave', '.tmpd', function () {
          $(this).next(".testtmpblock").hide();
      });
  });

Вы можете избежать следующего, если только один элемент имеет класс testtmpblock

$(document).ready(function () {
      $(document).on('mouseenter', '.tmpd', function () {
          $(".testtmpblock").show();
      }).on('mouseleave', '.tmpd', function () {
          $(".testtmpblock").hide();
      });
});
Поделиться
  • 0
    Это работа для меня. Я также попробовал на скрипке. Большое спасибо, сэр. Теперь у меня будет вызов сервлета в том div, который отображается при наведении курсора. Есть идеи, сэр, как это сделать?
  • 0
    Добро пожаловать, вам нужно будет использовать ajax, вы можете попробовать использовать jQuery ajax, это может помочь, software-free.com/2012/08/…
Показать ещё 10 комментариев
2

Если divs находятся рядом друг с другом, вы делаете это только с помощью CSS:

.testtmpblock {
  display: none;
}

.tmpd:hover ~ .testtmpblock {
  display: block;
}

Если вы хотите анимировать его, вы можете использовать переходы CSS3.

99% времени вы можете уйти только с помощью CSS, и анимации будут быстрее с переходами. Это все о том, как вы обрабатываете разметку. Если вы сделаете скрытый элемент дочерним, тогда он всегда выполним только с помощью CSS, например:

<div class="tmpd">
  kjkjkj
  <div class="testtmpblock">
    data
  </div>
</div>

И вы бы использовали селектор:

.tmpd:hover .testtmpblock {}
Поделиться
1 
 $(document).ready(function () {
        $('body').on('hover','.tmpd', function () {
            $(".testtmpblock").show();
        }, function () {
            $(".testtmpblock").hide();
        }
    );
 });
Поделиться
  • 0
    Это показывает мне ошибку в последней строке, что найдено несколько аннотаций.
  • 0
    Ой !! Я обновил проверку кода сейчас.
1

try next()

 $(document).on('mouseenter', '.tmpd', function () {
                $(this).next(".testtmpblock").show();
            }).on('mouseleave', '.tmpd', function () {
                $(this).next(".testtmpblock").hide();
            });
Поделиться

Ещё вопросы

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