如何通过单击 <a> 标签来阻止图像悬停答案

【问题标题】：how to stop a image from hovering by clicking on a <a> tag如何通过单击 <a> 标签来阻止图像悬停
【发布时间】：2013-06-11 13:54:16
【问题描述】：

我想在点击<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;}

提前致谢。

【问题讨论】：

确保 jQuery 已加载 .. 检查控制台我认为你会得到错误
据我了解，图像悬停是由 css 制作的，要更改这一点，您需要更改 css 和/或动态更改 css 样式。
你最好在jsfiddle 上放一个简单的例子，这样我们就可以更容易地看到你在处理什么。目前还不清楚你的问题是什么，里面有大量不相关的代码。
我可以通过断点看到 jQuery 已加载。Aristos: 你能给我看看代码吗？

标签： javascript asp.net jquery javascript-events

【解决方案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 ) 获取css 属性/值并使用.data( key, value ) 存储到HTML5 data-*，然后在您设置的.hover 事件中css 从数据中替换 css :hover

我创建了简单的 jsFiddle 示例来解释我的意思 - http://jsfiddle.net/mDv2n/

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

【讨论】：

我不能添加类，你能不能再给点意见？