Html 防止儿童触发悬停

我有一个最后的项目，我正在为一个需要在一页上使用表单的类工作。长话短说，我希望在将鼠标悬停在“联系人”按钮上时显示表单。但是，在窗体占据的空间中悬停时，它也会出现。在没有JavaScript的情况下，如何删除对节点的子节点触发的悬停事件？这是一个基本的web创作类，所以除非必要，否则我不想使用JavaScript

我还想保持

.droptainer

上的转换。将悬停时的

display:none

设置为

display:block

，将删除转换，因为无法设置显示属性的动画

导航菜单的

/*样式*/
导航ul{
列表样式：无；
位置：相对位置；
填充：0；
显示：网格；
网格模板：自动/重复（5，1fr）；
对齐内容：居中对齐；
}
导航ul{
显示：无；
位置：绝对位置；
最高：100%；
宽度：20%；
}
导航ul li：悬停>ul{
显示：块；
}
nav>ul:：之后{
内容：“；
明确：两者皆有；
显示：块；
}
李国宝{
浮动：无；
}
导航ulli a：悬停{
颜色：黑色；
背景颜色：橙色；
过渡时间：500ms；
}
海军ulli a{
边框：2倍纯色灰色；
边界半径：10px；
文本对齐：居中；
显示：块；
填充：.7em0；
文字装饰：无；
背景色：黑色；
颜色：花白色；
}
/*下拉表单的样式*/
droptainer先生{
不透明度：0；
显示：块；
位置：绝对位置；
最高：100%；
左：60%；
利润率：0.5%；
填充物：2米10%；
背景颜色：橙色；
边框：2倍纯色灰色；
边界半径：15px；
盒影：5px-5px 12px 4px rgba（0,0,0,0.50）；
转化：translatey（-5%）；
过渡：600ms 250ms；
}
.drop\u btn:hover>.droptainer{
转化：translatey（5%）；
不透明度：1；
}
德普泰纳：之后{
内容：“；
位置：绝对位置；
前-9%；
左：50%；
宽度：50%；
高度：1.75em；
}

注册最新的寿司新闻
名称
电子邮件
我想报名参加寿司新闻。
提交
重置

一种解决方案是在默认情况下将

显示设置为
无
，然后只需在悬停时将其设置为
块
（切换
显示
，而不是
不透明度
）

不幸的是，
transition
在
display
属性上不起作用，因此您的元素将立即出现——尽管这可能已经足够了


导航菜单的
/*样式*/
导航ul{
列表样式：无；
位置：相对位置；
填充：0；
显示：网格；
网格模板：自动/重复（5，1fr）；
对齐内容：居中对齐；
}
导航ul{
显示：无；
位置：绝对位置；
最高：100%；
宽度：20%；
}
导航ul li：悬停>ul{
显示：块；
}
nav>ul:：之后{
内容：“；
明确：两者皆有；
显示：块；
}
李国宝{
浮动：无；
}
导航ulli a：悬停{
颜色：黑色；
背景颜色：橙色；
过渡时间：500ms；
}
海军ulli a{
边框：2倍纯色灰色；
边界半径：10px；
文本对齐：居中；
显示：块；
填充：.7em0；
文字装饰：无；
背景色：黑色；
颜色：花白色；
}
/*下拉表单的样式*/
droptainer先生{
显示：无；
位置：绝对位置；
最高：100%；
左：60%；
利润率：0.5%；
填充物：2米10%；
背景颜色：橙色；
边框：2倍纯色灰色；
边界半径：15px；
盒影：5px-5px 12px 4px rgba（0,0,0,0.50）；
转化：translatey（-5%）；
过渡：600ms 250ms；
}
.drop\u btn:hover>.droptainer{
转化：translatey（5%）；
显示：块；
}
德普泰纳：之后{
内容：“；
位置：绝对位置；
前-9%；
左：50%；
宽度：50%；
高度：1.75em；
}














注册最新的寿司新闻
名称
电子邮件
我想报名参加寿司新闻。
提交
重置


有一种解决方案，可以使其简短易懂：

更改代码

.droptainer {
  opacity:0;
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 60%;
  margin: 0.5%;
  padding: 2em 10%;
  background-color: orange;
  border: 2px solid gray;
  border-radius: 15px;
  box-shadow: 5px -5px 12px 4px rgba(0, 0, 0, 0.50);
  transform: translatey(0);
  transition: 600ms 250ms;


}

及

它会给你完美的过渡，只有在点击按钮。
空白区问题已得到处理

注意：请记住在不显示可见性的情况下使用转换。
只要droptainer处于隐藏状态，即可设置指针事件：无：


导航菜单的
/*样式*/
导航ul{
列表样式：无；
位置：相对位置；
填充：0；
显示：网格；
网格模板：自动/重复（5，1fr）；
对齐内容：居中对齐；
}
导航ul{
显示：无；
位置：绝对位置；
最高：100%；
宽度：20%；
}
导航ul li：悬停>ul{
显示：块；
}
nav>ul:：之后{
内容：“；
明确：两者皆有；
显示：块；
}
李国宝{
浮动：无；
}
导航ulli a：悬停{
颜色：黑色；
背景颜色：橙色；
过渡时间：500ms；
}
海军ulli a{
边框：2倍纯色灰色；
边界半径：10px；
文本对齐：居中；
显示：块；
填充：.7em0；
文字装饰：无；
背景色：黑色；
颜色：花白色；
}
/*下拉表单的样式*/
droptainer先生{
不透明度：0；
显示：块；
位置：绝对位置；
最高：100%；
左：60%；
玛吉
.drop_btn:hover  .droptainer {
  transform: translatey(5%);
  visibility: visible;
  opacity:1;

}