Изменить: наведите курсор на jQuery

У меня есть тег <ul>, который показывает некоторые из <li> при наведении указателя. Он хорошо работает в HTML. Теперь я хочу изменить это с помощью jQuery. Я хочу НЕ показывать <li>#two и #three при наведении указателя. Я пытался предотвратить поведение по умолчанию с e.preventDefault();, но он не работает.Изменить: наведите курсор на jQuery

Как я могу изменить :hover с помощью jQuery? Другими словами, я хочу #two и #three, чтобы скрыть от Гувера только с JQuery

У меня есть это проверить здесь: https://jsfiddle.net/42jqt4pn/2/

$("#language").mouseenter(function(e) { 
 
    e.preventDefault(); 
 
});

#language #two, 
 
#language #three { 
 
    display: none; 
 
} 
 
#language:hover #two, 
 
#language:hover #three { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="language"> 
 
    <li id="one"><a href="#">en</a> 
 
    </li> 
 
    <li id="two"><a href="#">ca</a> 
 
    </li> 
 
    <li id="three"><a href="#">fr</a> 
 
    </li> 
 
</ul>

источник

2017-01-17 segon

Просьба объяснить во всех деталях поведение вы ищете. Сломанный код не является хорошей заменой для правильного объяснения. – charlietfl

Mouseenter НЕ отменяется. Вы не можете предотвратить его по умолчанию. https://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseenter –

Почему вы не можете просто изменить css и удалить правило наведения? – charlietfl

Вы можете сделать это с JQuery-х .hover() метод:

$("#language").hover(function() { 
 
    $("#two").css("display", "none"); 
 
    $("#three").css("display", "none"); 
 
}, function() {});

#language #two, 
 
#language #three { 
 
    display: none; 
 
} 
 
#language:hover #two, 
 
#language:hover #three { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="language"> 
 
    <li id="one"><a href="#">en</a> 
 
    </li> 
 
    <li id="two"><a href="#">ca</a> 
 
    </li> 
 
    <li id="three"><a href="#">fr</a> 
 
    </li> 
 
</ul>

источник

2017-01-17 14:23:07 Syden

почему вам нужен скрипт, чтобы скрыть # 3, когда он скрыт css? – charlietfl

Это вопрос для OP LOL .. Невероятно, чтобы его нивелировали. Я просто даю ответ на его сценарий. – Syden

Не невероятно вообще ... когда ответ не имеет смысла – charlietfl

Просто переключить класс на элемент и изменить CSS для учета этого класса

$("#language").hover(function(){ 
    $(this).toggleClass('active') 
});

CSS

#language #two, #language.active:hover #two 
#language #three, #language.active:hover #three { 
    display: none; 
}

источник

2017-01-17 14:35:26 charlietfl

Зачем ему прикоснуться к CSS, чтобы позже добавить jQuery, когда он может решить это прямо из CSS с помощью '#language: hover #two, #language: hover #three { \t display: none; } '? Обратите внимание на часть« только с jQuery », не волнуйтесь, я не буду в любом случае ниспровергать. – Syden

где вы кладете класс активным в css? – segon

Посмотрите на modifed css в ответ, он прямо там – charlietfl

прогрессивное улучшение. Я пытаюсь сделать основной, когда Javascript отключен, а затем сделать лучший дизайн, когда Javascript включен

Один из способов сделать это, чтобы установить атрибут класса на body, что вы удалить с JavaScript. Таким образом, вы знаете, если посетитель имеет JS включен и может соответствующим образом подгонять его. Просто префикс всех стилей «no-js» с именем класса .no-js.

//if the user has JS enabled, remove the no-js classname: 
 
$("body").removeClass("no-js");

#language #two, 
 
#language #three { 
 
    display: none; 
 
} 
 
/* the following rule is only applied when the no-js class is set on the body */ 
 
.no-js #language:hover #two, 
 
.no-js #language:hover #three { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body class="no-js"> 
 
<ul id="language"> 
 
    <li id="one"><a href="#">en</a> 
 
    </li> 
 
    <li id="two"><a href="#">ca</a> 
 
    </li> 
 
    <li id="three"><a href="#">fr</a> 
 
    </li> 
 
</ul> 
 
</body>

источник

2017-01-17 14:52:35 Moob

Это хороший вариант. спасибо – segon

Изменить: наведите курсор на jQuery

ответ

Смежные вопросы