如何在禁用点击的同时保持悬停属性 [英] How to keep hover attributes while disabling click

问题描述

所以我有这个列表通过CSS添加了一些悬停效果。
HTML：

 < li>< a href =＃>当前期间< / a> 
< ul> 
< li>< a href =＃> 2012< / a> 
< li> a href =＃> 2011< / a> //...你可以得到
  

CSS：

#nav a：hover {
background-color：#fff;
颜色：＃333;
}


当用户在当前期间悬停时，会出现一列儿童元素列表（2012， 2011 ...有自己的孩子）。我的问题是用户可以点击当前期间。

 < li>< a href = ＃class =noclick>当前时段< / a> .... 
  

CSS：

.noclick {
pointer-events：none;
cursor：default;
}

但这当然会消除悬停功能。我想保持悬停效果，同时使按钮不可点击（我在想JavaScript，但我想要一个更直接的解决方案）。感谢任何帮助:)

解决方案

在您的点击处理程序中测试点击的项目是否具有该类别：

$ b点击（函数（e）{
if（$（e.target）.hasClass（））
$ b

  noclick））
返回false; 
 
 //你的其他代码在这里
}）; 
  

请注意，通过测试 target 元素，这样您不会阻止点击子元素的点击。

或者如果noclick类不会动态更改，即那些noclick链接始终为noclick，您可以更改选择器以便点击处理程序不绑定到这些特定元素：

  $（＃nav a）。not（。noclick） .click（function（）{... 
  

So I have this list with some hover effect added through CSS. HTML:

<li><a href="#">Current Period</a>
  <ul>
        <li><a href="#">2012</a>
        <li> a href="#">2011</a> //...you get the point

CSS:

#nav a:hover {
    background-color: #fff;
    color: #333;
}

When the user hovers over current period a list of children elements appear (2012, 2011... which have children of their own). My problem is that users can click on "Current Period". I have managed to remove the click by adding a class to the anchor like so:

<li><a href="#" class="noclick">Current Period</a> ....

CSS:

.noclick { pointer-events: none; cursor: default; }

but this of course removes the hover feature. I want to keep the hover effect while making the button un-clickable (I was thinking javascript, but I want a more "direct" solution). I appreciate any help :)

解决方案

In your click handler test whether the clicked item has that class:

$("#nav a").click(function(e){
     if ($(e.target).hasClass("noclick"))
         return false;

     // your other code here
});

Note that by testing the target element for the event you don't then prevent the clicks on child elements from working.

Or if the "noclick" class is not changed dynamically, i.e., those "noclick" links start out as and will always be "noclick", you could change the selector so that your click handler isn't bound to those particular elements:

$("#nav a").not(".noclick").click(function() { ...

这篇关于如何在禁用点击的同时保持悬停属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！