Question

我希望在点击<a>标记时停止图像悬停，首先它在firebug中有未定义的$或jquery错误但添加后

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

问题解决了，但它也无效。这是我的代码：

    <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>

     <script type="text/javascript">
     $(document).ready(function () { $("#mm").click(function () { $('#m').unbind('mouseout');});       }); 
 </script>
    </head> 





 <div id="holder"> 
<ul id="menuOuter"> 
    <li class="lv1-li"> 

        <ul class="sub"> 

                <li class="sub-li p1 current">
    <a id="mm" class="a1" href="#url" >



          <img id="m" src="a2.jpg" /><b>Kaf</b></a></li></ul></body>

和css：

 #holder {width:750px; height:350px; position:relative; font-family:arial, sans-serif; border-top:1px solid #da8; border-bottom:1px solid #da8; z-index:100;}
    #holder table {border-collapse:collapse; margin:-1px;}
    #holder ul {float:left; padding:0; margin:0; list-style:none;}
    #holder ul.sub {margin-bottom:-4px;}
    #menuOuter li a.lv1-a {background:blue; zoom:1;}
    #menuOuter li a.lv1-a:hover {direction:ltr;}

    #holder ul.sub {float:left;}
    #holder ul.sub ul {position:absolute; left:-9999px; top:180px;}
    #holder ul.sub li.sub-li a img {display:block; position:absolute; left:-9999px; border:0; height:200px; width:750px;}

    #holder ul.sub li.sub-li {display:block; float:left; width:150px; height:240px;}
    #holder ul.sub li.sub-li a {margin-top:200px; width:110px; display:block; padding:0 20px; height:40px; line-height:40px; color:#fff; text-decoration:none; font-family:arial, sans-serif; font-size:14px;}
    #holder ul.sub li.sub-li a.a1 {background:#e9a358;}
    #holder ul.sub li.sub-li a.a2 {background:#e9a358;}
    #holder ul.sub li.sub-li a.a3 {background:#9ea64b;}
    #holder ul.sub li.sub-li a.a4 {background:#dfb344;}
    #holder ul.sub li.sub-li a.a5 {background:#b8826e;}

    #menuOuter li:hover ul.sub li.current a {margin-top:200px; height:40px;}
    #menuOuter li:hover ul.sub li.current ul {left:-9999px;}
    #menuOuter li:hover ul.sub li.current a img {left:-9999px;}

    #menuOuter a:hover ul.sub li.current a {margin-top:200px; height:40px;}
    #menuOuter a:hover ul.sub li.current ul {left:-9999px;}
    #menuOuter a:hover ul.sub li.current a img {left:-9999px;}

    #holder ul.sub li.sub-li:hover > a {margin-top:0; height:350px;}
    #holder ul.sub li.sub-li a:hover {margin-top:0; height:350px;}

    #holder ul.sub li.current a {margin-top:0; height:350px;}
    #holder ul.sub li.current a.a1 img {left:0; top:0; z-index:-1;}
    #holder ul.sub li.current a.a2 img {left:-150px; top:0; z-index:-1;}
    #holder ul.sub li.current a.a3 img {left:-300px; top:0; z-index:-1;}
    #holder ul.sub li.current a.a4 img {left:-450px; top:0; z-index:-1;}
    #holder ul.sub li.current a.a5 img {left:-600px; top:0; z-index:-1;}

    #menuOuter li:hover ul.sub li.current:hover a {margin-top:0; height:350px;}
    #menuOuter li:hover ul.sub li.current:hover ul {left:0;}
    #menuOuter li:hover ul.sub li.current:hover ul li {float:left; height:15px; padding:0; margin:0;}
    #menuOuter li:hover ul.sub li.current:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px;}
    #menuOuter li:hover ul.sub li.current:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;}

    #menuOuter a:hover ul.sub li.current a:hover {margin-top:0; height:350px;}
    #menuOuter a:hover ul.sub li.current a:hover ul {left:0;}
    #menuOuter a:hover ul.sub li.current a:hover ul li {float:left; height:15px; padding:0; margin:0;}
    #menuOuter a:hover ul.sub li.current a:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px;}
    #menuOuter a:hover ul.sub li.current a:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;}


    #holder ul.sub li {position:relative;}

    #holder ul.sub li.sub-li:hover ul {left:0; width:130px;}
    #holder ul.sub li.sub-li:hover ul li {float:left; height:15px; padding:0; margin:0;}
    #holder ul.sub li.sub-li:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px; font-size:11px;}
    #holder ul.sub li.sub-li:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;}
    #holder ul.sub li.sub-li:hover a.a1 img {left:0; top:0; z-index:-1;}
    #holder ul.sub li.sub-li:hover a.a2 img {left:-150px; top:0; z-index:-1;}
    #holder ul.sub li.sub-li:hover a.a3 img {left:-300px; top:0; z-index:-1;}
    #holder ul.sub li.sub-li:hover a.a4 img {left:-450px; top:0; z-index:-1;}
    #holder ul.sub li.sub-li:hover a.a5 img {left:-600px; top:0; z-index:-1;}

    #holder ul.sub li.sub-li a:hover ul {left:0; width:130px;}
    #holder ul.sub li.sub-li a:hover ul li {float:left; height:15px; padding:0; margin:0;}
    #holder ul.sub li.sub-li a:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px; font-size:11px;}
    #holder ul.sub li.sub-li a:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;}
    #holder ul.sub li.sub-li a.a1:hover img {left:0; top:0; z-index:-1;}
    #holder ul.sub li.sub-li a.a2:hover img {left:-150px; top:0; z-index:-1;}
    #holder ul.sub li.sub-li a.a3:hover img {left:-300px; top:0; z-index:-1;}
    #holder ul.sub li.sub-li a.a4:hover img {left:-450px; top:0; z-index:-1;}
    #holder ul.sub li.sub-li a.a5:hover img {left:-600px; top:0; z-index:-1;}

    #holder ul.sub li.current ul {left:0; width:130px;}
    #holder ul.sub li.current ul li {float:left; height:15px; padding:0; margin:0;}
    #holder ul.sub li.current ul li a {height:15px; line-height:15px; margin:0; padding:0 20px; font-size:11px;}

    #holder ul.sub li span {display:block;position:absolute; top:240px; left:0; line-height:15px; width:130px; padding:10px; height:90px; z-index:-1; color:#000; text-decoration:none; font-size:11px;}
    #holder ul.sub li.p1 span {background:#ffe398;}
    #holder ul.sub li.p2 span {background:#ffe398;}
    #holder ul.sub li.p3 span {background:#dee68b;}
    #holder ul.sub li.p4 span {background:#fff384;}
    #holder ul.sub li.p5 span {background:#f8c2ae;}

提前感谢。

Answer 1

您可以将只想使用“hover-able”的css属性添加到类

HTML：

<img id="m" class="hoverable" src="a2.jpg" />

CSS：

.hoverable:hover {
    background-color: red;
}

jQuery的：

$(document).ready(function () {
    $("#mm").click(function () {
        $('#m').removeClass('hoverable');
    });
});

编辑：如果您无法添加课程，则可以使用.css( propertyName )使用.data( key, value )获取css属性/值，然后使用http://jsfiddle.net/mDv2n/将其存储到HTML5 data-*，然后输入您从数据中设置css以替换css .hover

的:hover事件

我创建了简单的jsFiddle示例，可以解释我的意思 - {{3}}

这不是最佳解决方案，而是在极限范围内发生的最佳解决方案。

如何通过点击<a> tag</a>来停止图片悬停

1 个答案: