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

Ответ 1

Я бы предложил использовать 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

Ответ 2

Вы можете попробовать следующее:

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

DEMO

Ответ 3

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

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

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

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

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

Ответ 4

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

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

Например, css:

.nohover:hover {
    color: black !important;
}

Затем с помощью jQuery:

$("#elm").addClass("nohover");

С помощью этого метода вы можете переопределить столько элементов DOM, сколько хотите, не привязывая тонны событий onHover.

Ответ 5

Используйте JQuery Hover для добавления/удаления класса или стиля в Hover:

$( "mah div" ).hover(
  function() {
    $( this ).css("background-color","red");
  }, function() {
    $( this ).css("background-color",""); //to remove property set it to ''
  }
);

Ответ 6

Это слишком поздно, однако лучший пример, как добавить псевдоэлемент в стиле 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>

Ответ 7

Немного опоздал на вечеринку, но это мое решение:

$(".myclass, .myclass2").on('mouseenter', function() {
  $(this).css({
  	"background-color":"red",
    "color":"gold"
  });
});
$(".myclass, .myclass2").on('mouseleave', function() {
  $(this).css({
  	"background-color":"transparent",
    "color":"black"
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myclass">
    <div>hover on myClass</div>
</div>

<div class="myclass2">
    <div>hover on myClass2</div>
</div>

<div class="myclass">
    <div>hover on myClass</div>
</div>