javascript - 鼠标悬停效果仅在 中的 上

Question

这是我的 HTML:

<div id="cart">
 <a>
  <span></span>
  <i></i>
 </а>
</div>

当我的鼠标悬停在 <a> 上时，我会产生鼠标悬停效果标签。但我只想在 <i> 上有鼠标悬停效果标签

这是我添加“active”类的 Javascript:

$('#cart > .heading a').die('mouseleave').die('mouseover').die('mouseleave').die('click');
$('#cart').die('mouseleave').die('mouseover').die('mouseleave').die('click');
$('#cart').live('mouseover', function () {
    if (!$("#cart").hasClass('active')) {
        if (!Journal.isOC2) {
            $('#cart').load('index.php?route=module/cart #cart > *');
        }
        $('#cart').addClass('active');
        $('#cart').live('mouseleave', function () {
            $(this).removeClass('active');
        });
    }
});

然后我替换#cart至 #cart a i无处不在

没有任何成功。

Answer 1

我只是删除了 Journal.isOC2 部分及其工作

$('#cart a i > .heading a').die('mouseleave').die('mouseover').die('mouseleave').die('click');
$('#cart a i').die('mouseleave').die('mouseover').die('mouseleave').die('click');
$('#cart a i').live('mouseover', function () {
    if (!$("#cart a i").hasClass('active')) {
        
        $('#cart a i').addClass('active');
        $('#cart a i').live('mouseleave', function () {
            $(this).removeClass('active');
        });
    }
});

.active{
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="cart">
Div
 <a> Anchor
  <span>Span</span>
  <i>Italic</i>
 </а>
</div>

或者你也可以用最新版本的 jquery 这样做

$("#cart a i").on("mouseover", function(){
  $(this).addClass("active");
});
$("#cart a i").on("mouseleave", function(){
  $(this).removeClass("active");
});

.active{
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cart">
Div
 <a> Anchor
  <span>Span</span>
  <i>Italic</i>
 </а>
</div>