Javascript 如何通过单击a<；a>；标签

我想在单击

标记时阻止图像悬停，起初它在firebug中有未定义的

$

或jquery错误，但在添加

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

---

提前感谢。

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

HTML:

jQuery：

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

---

编辑：如果您不能添加类，您可以使用和存储

HTML5数据-*

获取css属性/值，然后在

中悬停

事件中设置css从数据替换css

：悬停

我创建了一个简单的JSFIDLE示例，可以解释我的意思-

---

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

确保jQuery已加载。。检查控制台，我想你会发现错误，据我所知，图像悬停是由css造成的，要改变它，你需要改变css和/或动态改变css样式。你最好把一个简单的例子放在一起，这样我们可以更容易地看到你在处理什么。目前还不清楚你的问题是什么，里面有大量不相关的代码。我可以通过断点看到jQuery已经加载。亚里士多德：你能给我看一下代码吗？我不能添加类，你能给我另一个想法吗？

 #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;}

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

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

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