鼠标悬停效果仅

Question

这是我的HTML：

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

当鼠标悬停在<a>标记上时，我会有鼠标悬停的效果。 但是我只想在<i>标记上具有鼠标悬停效果

这是我的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 ai无处不在

没有任何成功。

Answer 1

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

 $('#cart ai > .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 ai").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 ai").on("mouseover", function(){ $(this).addClass("active"); }); $("#cart ai").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或c标签来使用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

这是我的ruff逻辑试试这个：

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

Answer 5

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

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <style type="text/css"> .active { color: red; } </style> <div id="cart"> <a> <span></span> <i style="border:1px solid black;">here</i> </а> </div> 

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>