在悬停时显示下拉菜单，仅使用CSS关闭

时间：2016-12-09 14:09:57

标签： html css html5 css3 pointer-events

当有人点击它们时，有人可以帮我解释为什么下拉菜单中的链接不起作用？也许是因为指针事件？我试图在单击链接或单击关闭按钮后关闭下拉菜单。我添加了一些很酷的东西，比如在点击链接时隐藏父容器。

有很多选择：

  1. 使用this.report.userIds，但在使用焦点时，下拉菜单不会 在下一次悬停在下拉列表时触发。

  2. 在容器上使用:focus，在:active上仅使用pointer-events 活动链接，但指针事件是错误的

  3. 使用:target但遇到的问题与：相同，不会触发 第二个胡佛。

    4. ＆＃13;
    ＆＃13; 
    body {
    padding: 20px;
}
.container {
    border: 1px solid lime;
    padding: 10px;
    width: 200px;
}
.test1 {
    display: none;
    border: 1px dashed orange;
    background: green;
    padding: 10px;
    pointer-events: none;
}
.container:hover .test1 {
    display: inline-block;
}
.container:hover .test1:active {
    display: none;
}
a {
    pointer-events: auto;
    color: lime;
    font-weight: bold;
}
    ＆＃13; 
    <ul class="container">
	 Drop down menu
	<li class="test1">
	<a class="dropdown" href="#">X Close</a>
	<ul class="content">
		 CLOSE THIS CONTENT
		<li class="link"><a href="http://www.google.com">Go to link 1</a></li>
		<li class="link"><a href="https://www.google.co.uk">Go to link 2</a></li>
		<li class="link"><a href="https://www.google.co.uk">Go to link 3</a></li>
	</ul>
    ＆＃13;
    ＆＃13;
    ＆＃13;

10 个答案:

答案 0 :(得分：4)

我会通常使用JS来做这件事 - 但是使用CSS， 是一个黑客攻击：

首先创建一个标识为close且label的输入，用于包装我们的关闭按钮：

  <input type="radio" id="close" />
  <li class="test1">
    <label for="close">
      <a class="dropdown" href="#">X Close</a>
    </label>

并添加此样式而不是当前.test1:active：

.container:hover #close:active + .test1{
  display: none;
}
#close {
  display: none;
}

见下面的演示：

body {
  padding: 20px;
}
.container {
  border: 1px solid lime;
  padding: 10px;
  width: 200px;
}
.test1 {
  display: none;
  border: 1px dashed orange;
  background: green;
  padding: 10px;
  pointer-events: none;
}
.container:hover .test1 {
  display: inline-block;
}
#close {
  display: none;
}
.container:hover #close:active + .test1 {
  display: none;
}
a {
  pointer-events: auto;
  color: lime;
  font-weight: bold;
}
<ul class="container">
  Drop down menu
  <input type="radio" id="close" />
  <li class="test1">
    <label for="close">
      <a class="dropdown" href="#">X Close</a>
    </label>
    <ul class="content">
      CLOSE THIS CONTENT
      <li class="link"><a href="http://www.google.com">Go to link 1</a>
      </li>
      <li class="link"><a href="https://www.google.co.uk">Go to link 2</a>
      </li>
      <li class="link"><a href="https://www.google.co.uk">Go to link 3</a>
      </li>
    </ul>
  </li>
</ul>

但是上面的代码在input中有一个无效的ul元素 - 以防止你可以编辑一些标记来为ul创建一个更多的包装器（也许你有由于标记更改而稍微调整宽度/填充） - 请参阅下面的代码：

body {
  padding: 20px;
}
.container {
  border: 1px solid lime;
  padding: 10px;
}
ul {
  width: 200px;
}
.test1 {
  display: none;
  border: 1px dashed orange;
  background: green;
  padding: 10px;
  pointer-events: none;
}
.container:hover .test1 {
  display: inline-block;
}
#close {
  display: none;
}
.container:hover #close:active + ul > li.test1 {
  display: none;
}
a {
  pointer-events: auto;
  color: lime;
  font-weight: bold;
}
<div class="container">
  Drop down menu
  <input type="radio" id="close" />
  <ul>
    <li class="test1">
      <label for="close">
        <a class="dropdown" href="#">X Close</a>
      </label>
      <ul class="content">
        CLOSE THIS CONTENT
        <li class="link"><a href="http://www.google.com">Go to link 1</a>
        </li>
        <li class="link"><a href="https://www.google.co.uk">Go to link 2</a>
        </li>
        <li class="link"><a href="https://www.google.co.uk">Go to link 3</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

答案 1 :(得分：3)

快速检查： Working JSFiddle

  

当有人点击它们时，有人可以帮我解释为什么下拉菜单中的链接不起作用？也许是因为指针事件？

解释为什么会出现这种行为： 是的，你是对的，这是因为你使用ImageButton imageButton = (ImageButton) findViewById(R.id.button); //instantiate the button imageButton.setOnTouchListener(new OnTouchListener() {...}) //set the listener 选择器逻辑的方式，为了详细解释，请考虑你的CSS规则

:active

您的主.container:hover .test1:active { display: none; } 下有菜单链接，内部链接上的任何点击也会冒泡到此元素，因此它与点击li.test1一样好。因此，只要按住鼠标（鼠标按下事件），它就会触发li事件并隐藏:active（即：links），但点击事件仅当鼠标向下和向上时才完成。现在，li.test1被隐藏，li不再在链接上。所以当你看到没有机会触发点击事件。这就是问题所在。

mouse up

解决方案：您可以使用两个不同的I saw other answers which you seem to be interested in and this really doesn't need any kind of hack, It can be done by just formatting your HTML and with some CSS changes. ，一个用于li.test1，而不是在li内包含内部菜单链接{1}}和其他人持有X CLose。有了这个，我们可以确保当menu links处于活动状态时（即鼠标停止）我们可以隐藏它以及另一个新的li.test1 与它相邻。这意味着，当用户点击li X Close我们隐藏菜单时，如果他点击了您重定向的其他菜单项。

因此，HTML结构中的更改应该类似于

li

主要CSS规则是

<ul class="container">
  Drop down menu
  <li class="test1">
    <a class="dropdown" href="#">X Close</a>
  </li>
  <li class="MenuLinks">
    <ul class="content">
      <!-- all your links go here-->
    </ul>
  </li>
</ul>

下面是一个SO工作片段 

.container:hover .test1:active,
.container:hover .test1:active + .MenuLinks {
  display: none;
}

body {
  padding: 20px;
}
.container {
  border: 1px solid lime;
  padding: 10px;
  width: 200px;
  list-style-type: none;
}
.test1,
.MenuLinks {  
  display: none;
  border-color: orange;
  border-style: dashed;
  background: green;
  pointer-events: none;
}
.test1 {
  padding: 10px;
  border-width: 1px 1px 0px 1px;
}
.MenuLinks {
  border-width: 0px 1px 1px 1px;
}
.container:hover li {
  display: block;
}

/*Rule to hide both test1 and MenuLinks when X Close is clicked*/
.container:hover .test1:active,
.container:hover .test1:active + .MenuLinks {
  display: none;
}


a {
  pointer-events: auto;
  color: lime;
  font-weight: bold;
}

注意：单击链接时出现空白屏幕是由于谷歌的安全限制交叉来源策略在控制台中出现此错误

<ul class="container"> Drop down menu <li class="test1"> <a class="dropdown" href="#">X Close</a> </li> <!--seperate li for close--> <li class="MenuLinks"> <!--wrap all your menu items here--> <ul class="content"> CLOSE THIS CONTENT <li class="link"><a href="http://www.google.com">Go to link 1</a> </li> <li class="link"><a href="https://www.google.co.uk">Go to link 2</a> </li> <li class="link"><a href="https://www.google.co.uk">Go to link 3</a> </li> </ul> <li> </ul>

但是，当您单击链接时，您可以在网络选项卡中看到请求。

希望这会有所帮助!!

答案 2 :(得分：1)

它似乎不起作用，因为在鼠标按下:hover - 类以保持下拉菜单打开消失了。因此，鼠标注册事件不会在链接上执行，因为下拉列表已经再次关闭，因此不会执行任何单击操作。您应该使用javascript打开和关闭下拉菜单。

答案 3 :(得分：1)

我建议删除

.container:hover .test1:active {
    display: none;
}

并找到另一种方式（几行javascript将会这样做），当你点击＆＃34; X关闭＆＃34;链接。 （顺便修复了一些html缺失的标签）。现在链接正在运行：

＆＃13;
＆＃13; 
body {
    padding: 20px;
}
.container {
    border: 1px solid lime;
    padding: 10px;
    width: 200px;
}
.test1 {
    display: none;
    border: 1px dashed orange;
    background: green;
    padding: 10px;
    pointer-events: none;
}
.container:hover .test1 {
    display: inline-block;
}
a {
    pointer-events: auto;
    color: lime;
    font-weight: bold;
}
＆＃13; 
<ul class="container">
  Drop down menu
  <li class="test1">
    <a class="dropdown" href="#">X Close</a>
    <ul class="content">
      CLOSE THIS CONTENT
      <li class="link"><a href="http://www.google.com">Go to link 1</a></li>
      <li class="link"><a href="https://www.google.co.uk">Go to link 2</a></li>
      <li class="link"><a href="https://www.google.co.uk">Go to link 3</a></li>
    </ul>
  </li>
</ul>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：1)

您可以在label上使用button和a来关闭链接并执行以下操作 - 

body {
  padding: 20px;
}

.container {
  border: 1px solid lime;
  padding: 10px;
  width: 200px;
}

.test1 {
  display: none;
  border: 1px dashed orange;
  background: green;
  padding: 10px;
  pointer-events: none;
}

.container:hover .test1 {
  display: inline-block;
}

a, label {
  pointer-events: auto;
  color: lime;
  font-weight: bold;
}

/* close button */
#xclose:active + .test1 {
  display:none;
}

#xclose {
  display: none;
}
<ul class="container">
  Drop down menu
  <button id="xclose">X close</button>
  <li class="test1">    
    <label class="dropdown" for="xclose">X Close</label>        
    <ul class="content">
      CLOSE THIS CONTENT
      <li class="link"><a href="http://www.google.com">Go to link 1</a></li>
      <li class="link"><a href="https://www.google.co.uk">Go to link 2</a></li>
      <li class="link"><a href="https://www.google.co.uk">Go to link 3</a></li>
    </ul>
  </li>
</ul>

希望这会以某种方式帮助你（y）。

答案 5 :(得分：0)

为什么要将"pointer-events: none;"添加到list-element .test1？这会覆盖您的pointer-events: auto;。尝试删除它，因为它会绑定您的点击事件。

答案 6 :(得分：0)

我建议尝试使用jQuery来处理仅在按下链接时关闭容器。 pointer-events有很多问题。因此，他们决定将该功能推迟到CSS4。

我还认为pointer-events: none;会阻止任何点击事件被触发，所以使用jQuery只是为了链接不起作用。我想你必须用jQuery修复容器的打开和关闭。

答案 7 :(得分：0)

在CSS中，您可以将label元素绑定到inputs。鉴于此，您可以将关闭按钮绑定到输入 - 当处于活动状态时 - 再次隐藏列表。

body{
  padding: 20px;
}

a, label{
  text-decoration: none;
  cursor: pointer;
  color: lime;
  font-weight: bold;
}

.container{
  border: 1px solid lime;
  padding: 10px;
  width: 200px;
}

.dropdown{
  display: none;
  border: 1px solid orange;
  background: green;
  margin-top: 10px;
  padding: 10px;
}

#close, #close:active + .dropdown{
  display: none;
}

.container:hover .dropdown{
  display: block;
}

.dropdown > ul{
  padding: 0;
  list-style: none;
}
<div class="container">
  Drop down menu
  <button id="close"></button>
  <div class="dropdown">
    <label for="close">X Close</label>
    <ul>
      <li class="link"><a href="http://www.google.com">Go to link 1</a></li>
      <li class="link"><a href="https://www.google.co.uk">Go to link 2</a></li>
      <li class="link"><a href="https://www.google.co.uk">Go to link 3</a></li>
    </ul>
  </div>
</div>

input id="close"与for="close"一起插入列表前，并由#close, #close:active + .dropdown{ display: none; } 标签触发 触发后，以下规则将生效：

.container

隐藏清单。
但是当您将鼠标悬停在Drop down menu上时，它会再次出现，让您重复此过程。 这里不需要不必要的JavaScript。输入就可以了。

您的代码也存在一些问题。您的文字CLOSE THIS CONTENT和ul直接位于ul内，但无法完成。 li只能包含 private markers = []; constructor(mapService: MapService) { mapService.getMarkers() .subscribe( markers => this.markers = markers[0].businesses, error => console.error('Error: ' + error), () => console.log(this.markers) ); } marker = this.markers; } ，而不能包含任何内容。

希望这有帮助

答案 8 :(得分：0)

.container:hover .test1:active {
display: none;
}

将此更改为

.container:hover .test1:focus{
    display: none;
    }

这里发生的事情是，当您的div从链接点击中获取“活动”伪造代码时，它会在DOM冒泡到链接之前隐藏，以提供重定向。将其更改为焦点可能允许点击实际通过？

答案 9 :(得分：0)

其中一个选项是使用animate。我已使用opacity为您的代码提供了一个示例。使用visibility:hidden或overflow:hidden会增强您的代码。





    body {
        padding: 20px;
    }
    .container {
        border: 1px solid lime;
        padding: 10px;
        width: 200px;
    }
    .test1 {
        display: none;
        border: 1px dashed orange;
        background: green;
        padding: 10px;
        pointer-events: none;
    }
    .container:hover .test1 {
        display: inline-block;
    }
    
    a {
        pointer-events: auto;
        color: lime;
        font-weight: bold;
    }


.container .test1 {
  -webkit-animation: seconds 1.0s forwards;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 2s;
  animation: seconds 1.0s forwards;
  animation-iteration-count: 1;
  animation-delay: 2s;
  position: relative;
}
@-webkit-keyframes seconds {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;

  }

@keyframes seconds {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;

  }
}


    <ul class="container">
    	 Drop down menu
    	<li class="test1">
    	<a class="dropdown" href="#">X Close</a>
    	<ul class="content">
    		 CLOSE THIS CONTENT
    		<li class="link"><a href="http://www.google.com">Go to link 1</a></li>
    		<li class="link"><a href="https://www.google.co.uk">Go to link 2</a></li>
    		<li class="link"><a href="https://www.google.co.uk">Go to link 3</a></li>
    	</ul>
相关问题
最新问题