Как определить состояние CSS: hover в селекторе jQuery?

Question

Как определить состояние CSS: hover в селекторе jQuery?

Мне нужно определить цвет фона div: hover с jQuery, но следующее, похоже, не работает:

$(".myclass:hover div").css("background-color","red");

Как я могу получить тот же результат? Важно, что это должно быть сделано с jQuery, но по какой-то причине он не работает. Есть предложения? Спасибо!

639 6

jQuery javascript html css

6 ответов:

Comments

Ничего не найдено.

Sachin · Accepted Answer · 2014-01-10 20:27:05

Я бы предложил использовать CSS над jquery (если это возможно) в противном случае вы можете использовать что-то вроде этого
$("div.myclass").hover(function() {
  $(this).css("background-color","red")
});
Вы можете изменить ваш выбор в соответствии с вашими потребностями.

Как прокомментировал @A. Wolff, если вы хотите использовать этот эффект наведения на несколько классов, вы можете использовать его следующим образом
$(".myclass, .myclass2").hover(function(e) { 
    $(this).css("background-color",e.type === "mouseenter"?"red":"transparent") 
})
JS Fiddle Demo

Rahil Wazir · Accepted Answer · 2014-01-10 20:17:04

вы можете попробовать это:

$(".myclass").mouseover(function() {
    $(this).find(" > div").css("background-color","red");
}).mouseout(function() {
    $(this).find(" > div").css("background-color","transparent");
});

демо

arjabbar · Accepted Answer · 2015-02-10 05:40:17

Ну, вы не можете добавить стиль с помощью псевдо селекторов, таких как :hover,:after,:nth-child, или что-то подобное с помощью jQuery.

если вы хотите добавить такое правило CSS, вам нужно создать <style> элемент и добавить, что :hover правило к нему так же, как и в CSS. Тогда вам придется добавить, что <style> элемент на странице.

С помощью .hover функция кажется более подходящей, если вы не можете просто добавить css в таблицу стилей, но если вы настаиваете, вы можете делать:

$('head').append('<style>.myclass:hover div {background-color : red;}</style>')

если вы хотите узнать больше о добавлении CSS с JavaScript, вы можете проверить одно из сообщений в блоге Дэвида Уолша.

funkju · Accepted Answer · 2015-09-23 03:14:37

Я знаю, что это принятый ответ, но если кто-то пойдет на это, мое решение может помочь.

Я нашел этот вопрос, потому что у меня есть прецедент, когда я хотел отключить состояние :hover для элементов по отдельности. Поскольку нет никакого способа сделать это в DOM, другой хороший способ сделать это-определить класс в CSS, который переопределяет состояние наведения.

например, css:
.nohover:hover {
    color: black !important;
}
затем с помощью jQuery:
$("#elm").addClass("nohover");
С помощью этого метода, вы можете переопределить столько элементов DOM, сколько хотите, без привязки тонны событий onHover.

JerryGoyal · Accepted Answer · 2018-02-15 13:02:52

Использовать JQuery Hover чтобы добавить / удалить класс или стиль при наведении курсора:
$( "mah div" ).hover(
  function() {
    $( this ).css("background-color","red");
  }, function() {
    $( this ).css("background-color",""); //to remove property set it to ''
  }
);

veera · Accepted Answer · 2018-02-28 08:33:53

слишком поздно, однако лучший пример, как добавить псевдо элемент в стиле jQuery

 $(document).ready(function(){
 $("a.dummy").css({"background":"#003d79","color":"#fff","padding": "5px 10px","border-radius": "3px","text-decoration":"none"});
 $("a.dummy").hover(function() {
            $(this).css("background-color","#0670c9")
          }).mouseout(function(){
              $(this).css({"background-color":"#003d79",});
          });
 
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<a class="dummy" href="javascript:void()">Just Link</a>