仅使用CSS，将div悬停在<a>上时显示div

仅使用CSS，将div悬停在上时显示div</p>

的CSS CSS

DavaidTony宝儿

2020-03-23

</div>

当有人将鼠标悬停在<a>元素上时，我想显示一个div ，但是我想在CSS中而不是在JavaScript中执行此操作。您知道如何实现吗？

</div>

第3060篇《仅使用CSS，将div悬停在上时显示div》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点</p>

共9个回答

西门Green 2020.03.23

别忘了如果您要在图像上悬停，则必须将其放在容器周围。CSS：

.brand:hover + .brand-sales {
    display: block;
}

.brand-sales {
    display: none;
}

如果您将鼠标悬停在此：

<span className="brand">
   <img src="https://murmure.me/wp-content/uploads/2017/10/nike-square-1900x1900.jpg" 
     alt"some image class="product-card-place-logo"/>
</span>

这将显示：

<div class="product-card-sales-container brand-sales">
    <div class="product-card-">Message from the business goes here. They can talk alot or not</div>
</div>

神乐Tom 2020.03.23

的HTML

<div>
    <h4>Show content</h4>
</div>
<div>
  <p>Hello World</p>
</div>

的CSS

 div+div {
    display: none;
 }

 div:hover +div {
   display: block;
 }

CodePen：将鼠标悬停在div上将文本显示在另一个div中

梅 2020.03.23

根据我使用此CSS进行的测试：

.expandable{
display: none;
}
.expand:hover+.expandable{
display:inline !important;
}
.expandable:hover{
display:inline !important;
}

和这个HTML：

<div class="expand">expand</div>
<div class="expand">expand</div>
<div class="expandable">expandable</div>

，结果是它确实使用第二个展开，但没有使用第一个展开。因此，如果悬停目标和隐藏的div之间有一个div，则它将不起作用。

Stafan 2020.03.23

对我来说，如果我想与隐藏的div交互，而每次离开触发元素时都看不到它消失（在这种情况下为a），则必须添加：

div:hover {
    display: block;
}

卡卡西Near 2020.03.23

请测试此代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<style type="text/css"> 
div
{
display:none;
color:black
width:100px;
height:100px;
background:white;
animation:myfirst 9s;
-moz-animation:myfirst 9s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */  

}

@keyframes myfirst
{
0%   {background:blue;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}

 @-moz-keyframes myfirst /* Firefox */
{
0%   {background:white;}
50%  {background:blue;}
100% {background:green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
  0%   {background:red;}
  25%  {background:yellow;}
  50%  {background:blue;}
  100% {background:green;}
}

a:hover + div{
display:inline;
} 
</style>
</head>
<body>
<a href="#">Hover over me!</a>
<div>the color is changing now</div>
<div></div>
</body>
</html>

斯丁Tony 2020.03.23

我想提供这种通用模板解决方案，该解决方案扩展了Yi Jiang提供的正确解决方案。

其他好处包括：

支持将鼠标悬停在任何元素类型或多个元素上；
弹出窗口可以是任何元素类型或元素集，包括对象；
自我证明代码；
确保弹出窗口出现在其他元素上方；
如果从数据库生成html代码，则可以遵循的良好基础。

在html中，放置以下结构：

<div class="information_popup_container">
<div class="information">
<!-- The thing or things you want to hover over go here such as images, tables, 
     paragraphs, objects other divisions etc. --> 
</div>
<div class="popup_information">
<!-- The thing or things you want to popup go here such as images, tables, 
     paragraphs, objects other divisions etc. --> 
</div>
</div>

在css中放置以下结构：

div.information_popup_container {
position: absolute;
width:0px;
height:0px;
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.information {
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.popup_information {
position: fixed;
visibility: hidden;
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.information:hover + div.popup_information {
visibility: visible;
z-index: 200;
}

需要注意的几点是：

因为div.popup的位置设置为固定的（也可以使用绝对值），所以内容不在文档的正常流程中，因此可见属性无法正常工作。
设置z-index以确保div.popup出现在其他页面元素上方。
The information_popup_container is set to a small size and thus cannot be hovered over.
This code only supports hovering over the div.information element. To support hovering over both the div.information and div.popup then see Hover Over The Popup below.
It has been tested and works as expected in Opera 12.16 Internet Explorer 10.0.9200, Firefox 18.0 and Google Chrome 28.0.15.

Hover Over The Popup

As additional information. When the popup contains information that you might want to cut and paste or contains an object that you might want to interact with then first replace:

div.information_popup_container > div.information:hover + div.popup_information {
visibility: visible;
z-index: 200;
}

with

div.information_popup_container > div.information:hover + div.popup_information 
,div.information_popup_container > div.popup_information:hover {
visibility: visible;
z-index: 200;
}

And second, adjust the position of div.popup so that there is an overlap with div.information. A few pixels is sufficient to ensure that the div.popup is can receive the hover when moving the cusor off div.information.

这在Internet Explorer 10.0.9200中无法正常工作，在Opera 12.16，Firefox 18.0和Google Chrome 28.0.15中工作正常。

有关带有弹出式多级菜单的完整示例，请参见小提琴http://jsfiddle.net/F68Le/。

JinJin猴子 2020.03.23

.showme {
  display: none;
}

.showhim:hover .showme {
  display: block;
}

<div class="showhim">HOVER ME
  <div class="showme">hai</div>
</div>

jsfiddle

由于这个答案很受欢迎，我认为需要做一个小小的解释。当您将鼠标悬停在内部元素上时，使用此方法将不会消失。因为.showme位于.showhim内部，所以当您在两行文本（或任何两行文本）之间移动鼠标时，它不会消失。

这些是在实现此类行为时需要注意的quirq的示例。

这完全取决于您需要什么。此方法适用于菜单样式的方案，而Yi Jiang的适用于工具提示。

卡卡西 2020.03.23

您可以执行以下操作：

div {
    display: none;
}
    
a:hover + div {
    display: block;
}

<a>Hover over me!</a>
<div>Stuff shown on hover</div>

这使用相邻的兄弟选择器，是the 鱼下拉菜单的基础。

HTML5允许锚元素包装几乎所有内容，因此在这种情况下，div可以使该元素成为锚的子级。否则原理是相同的-使用:hover伪类更改display另一个元素的属性。

番长猴子 2020.03.23

我发现使用opacity更好，它允许您添加css3过渡以达到很好的悬停效果。转换将仅由较旧的IE浏览器删除，因此可以正常降级。

#stuff {
    opacity: 0.0;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}
#hover {
    width:80px;
    height:20px;
    background-color:green;
    margin-bottom:15px;
}
#hover:hover + #stuff {
    opacity: 1.0;
}

<div id="hover">Hover</div>
<div id="stuff">stuff</div>

相似问题

基于react18+vite4+zustand网页端仿微信聊天实例

0 回答

基于tauri+vite4+pinia跨端后台管理系统应用

0 回答

HTML5 Drag与Drop 拖动时更改图标/光标

5 回答

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

25 回答

基于tauri+vue3跨端聊天应用|tauri仿微信模板

0 回答

Ace Editor一款比较好用的展示代码组件

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android