jQuery mouseenter / exit не работает с li: nth-child (): before - PullRequest
Новая
       14

jQuery mouseenter / exit не работает с li: nth-child (): before

0 голосов
/ 26 апреля 2018

В приведенном ниже коде я пытаюсь отобразить содержимое: текст с jquery.

Если я удаляю :before, это работает! Почему jQuery не позволяет этого, в то время как javascript делает это.

Это сообщение (7 лет назад) говорит о моей проблеме, но она работает вокруг проблемы, не давая простого решения.

Сегодня нет простого решения для цели :before?

спасибо за вашу помощь 

$(document).ready(function() {
  $("div").mouseenter(function() {
    $("li:nth-child(2):before").show();
  });
  $("div").mouseleave(function() {
    $("li:nth-child(2):before").hide();
  });
});
li {
  display: none;
}

li:before {
  content: 'Show me';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>
  <li>This is a paragraph.</li>
  <li>This is a second paragraph.</li>
</ul>

<div style="width:30px; height:30px; background:black;cursor:pointer;position:absolute; top:50px;"></div>

1 Ответ

0 голосов
/ 26 апреля 2018

Видимость псевдоэлемента зависит от видимости (т.е. display status) его основного элемента, li:nth-child(2). Поэтому вы должны добавить соответствующую строку в ваши функции jQuery, чтобы также показать / скрыть основной элемент: 

$(document).ready(function(){
    $("div").mouseenter(function(){
        $("li:nth-child(2)").show();
        $("li:nth-child(2):before").show();
    });
    $("div").mouseleave(function(){
        $("li:nth-child(2)").hide();
        $("li:nth-child(2):before").hide();
    });
});
li{display:none;}
li:before{content:'Show me';}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>
<ul>
<li>This is a paragraph.</li>
<li>This is a second paragraph.</li>
</ul>

<div style="width:30px; height:30px; background:black;cursor:pointer;position:absolute; top:50px;"></div>


</body>
</html>
...