鼠标悬停效果仅适用于<a>

Question

This is my HTML:

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

And I have a mouseover effect when my mouse is over a <a> tag. But I want to have a mouseover effect only on the <i> tag

This is my Javascript who adds the class "active":

$('#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');
        });
    }
});

Then I replace#cart to #cart a i everywhere

Without any success.

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>

Answer 2

  

你可以使用你的div标签css或我标记css

来使用css

您可以在下面看到鼠标悬停效果的示例

.mainDiv i:hover{
color:red;
cursor:pointer;
}

<div class="mainDiv" id="cart">main div
 <a> A tag
  <span>Span tag</span>
  <i>here is I Tag try to hover me</i>
 </а>
</div>

Answer 3

首先，您的HTML编写不正确。 <a>代码需要href=""属性，以便与旧浏览器兼容。

此外，您的javascript看起来需要一些简单。

$('#code a i').hover(
  function() {
   // ran when onmouseover
  },
  function() {
   // ran when onmouseleave
  }
);

现在在上面看到的函数中实现自己的代码。

Answer 4

这是我的痞子逻辑试试这个：

$( "a" )
  .mouseover(function() {
    $( this ).find( "i" ).addClass('active');
  })
  .mouseout(function() {
    $( this ).find( "i" ).removeClass('active');
  });

Answer 5

您还可以使用最新的jQuery（2.1.1）将代码简化为以下代码。

@Autowired
private UserDetailsService userDetailsService;

@Bean
public UserDetailsService userDetailsService() {
    return super.userDetailsService();
}

$(function () {
	$('#cart i').on('mouseover mouseleave', function (e) {
		if (e.type == "mouseover")
		{
			//if (!Journal.isOC2) $('#cart').load('index.php?route=module/cart #cart > *');
		}
		$(this).toggleClass('active');
	})
});

Answer 6

$(document).ready(function(){
$("i").hover(function(){
$(this).addClass('red')
$(this).mouseleave(function(){
$(this).removeClass('red')
})
})
})

.red{
color : red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cart">
 <a>this is
  <span>span</span>
  <i>italic</i>
 </а>
</div>