JQuery hover не работает

Question

У меня есть JQuery hover, но он не отображается. Класс dimmed-item - это то, что я хотел бы добавить к классу kunden-item. Bout из них allready работать, если я manuely положить их дюйма JQuery уже в файле, поэтому должна быть какая-то логическая ошибка, которую я сделал.

Вот мой HTML 1 Элемент:

<div class="kunden-item kunde2-item"> 
    <img class="kunde" src="<?php echo $params->get('image2');?>" alt="Kunde"> 
</div> 

Вот мой JQuery:

$(document).ready(function(){ 
$("kunden-item") 
    .mouseenter(function() { 
    $(this).addClass("dimmed-item"); 
    }) 
    .mouseleave(function() { 
    $(this).removeClass("dimmed-item"); 
    }); 
}); 

Answer 1

kunden-item класс, так что ваш селектор нуждается ведущий .:

$(".kunden-item") 
    .mouseenter(function() { 
     $(this).addClass("dimmed-item"); 
    }) 
    .mouseleave(function() { 
     $(this).removeClass("dimmed-item"); 
    }); 
}); 

Также обратите внимание, что вы можете значительно сократить код, используя hover() d toggleClass():

$(".kunden-item").hover(function() { 
    $(this).toggleClass('dimmed-item'); 
}); 

Или только с помощью CSS в одиночку:

.kunden-item:hover { 
    opacity: 0.5; // for example only, apply whatever style you need here 
} 

Answer 2

Селекторов классов начинаются с .

У вас есть селектор типа и пытается соответствовать <kunden-item>элементов.

Вы должны иметь:

$(".kunden-item") 

Вы можете вероятно избавиться от JS полностью и просто использовать :hover правило в таблице стилей, хотя.

Answer 3

Вам не хватает точки (.) Перед kunden-item. Вы также можете использовать .hover(), который работает следующим образом:

$(document).ready(function(){ 
    $(".kunden-item") 
     .hover(function() { 
     $(this).addClass("dimmed-item"); 
     }, 
     function() { 
     $(this).removeClass("dimmed-item"); 
     }); 
    });