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

Question

提问by tetris

I would like to show a div when someone hovers over an <a>element, but I would like to do this in CSS and not JavaScript. Do you know how this can be achieved?

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

Answer 1

回答by Yi Jiang

You can do something like this:

你可以这样做此：

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

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

This uses the adjacent sibling selector, and is the basis of the suckerfish dropdown menu.

这使用了相邻的兄弟选择器，并且是吸盘鱼下拉菜单的基础。

HTML5 allows anchor elements to wrap almost anything, so in that case the divelement can be made a child of the anchor. Otherwise the principle is the same - use the :hoverpseudo-class to change the displayproperty of another element.

HTML5 允许锚元素包装几乎任何东西，所以在这种情况下，div元素可以成为锚的子元素。否则原理是一样的——使用:hover伪类来改变display另一个元素的属性。

Answer 2

回答by n00b

.showme {
  display: none;
}

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

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

jsfiddle

提琴手

Since this answer is popular I think a small explanation is needed. Using this method when you hover on the internal element, it wont disappear. Because the .showme is inside .showhim it will not disappear when you move your mouse between the two lines of text (or whatever it is).

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

These are example of quirqs you need to take care of when implementing such behavior.

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

It all depends what you need this for. This method is better for a menu style scenario, while Yi Jiang's is better for tooltips.

这一切都取决于你需要这个。这种方法更适用于菜单样式的场景，而Yi Jiang的更适用于工具提示。

Answer 3

回答by Timothy

I found using opacity is better, it allows you to add css3transitions to make a nice finished hover effect. The transitions will just be dropped by older IE browsers, so it degrades gracefully to.

我发现使用 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>

Answer 4

回答by Edd Tillen

I'm by know means an expert, but I'm incredibly proud of myself for having worked something out about this code. If you do:

我知道是一个专家，但我为自己解决了这个代码的问题而感到非常自豪。如果你这样做：

div {
    display: none;
}

a:hover > div {
    display: block;
}

(Note the '>') You can contain the whole thing in an a tag, then, as long as your trigger (which can be in it's own div, or straight up in the a tag, or anything you want) is physically touching the revealed div, you can move your mouse from one to the other.

（注意“>”）您可以将整个内容包含在 a 标签中，然后，只要您的触发器（可以在它自己的 div 中，或者直接在 a 标签中，或者您想要的任何东西）是物理接触的显示的 div，您可以将鼠标从一个移动到另一个。

Maybe this isn't useful for a great deal, but I had to set my revealed div to overflow: auto, so sometimes it had scroll bars, which couldn't be used as soon as you move away from the div.

也许这对很多事情没有用，但我不得不将我显示的 div 设置为 overflow: auto，所以有时它有滚动条，一旦你离开 div 就不能使用滚动条。

In fact, after finally working out how to make the revealed div, (although it is now a child of the trigger, not a sibling), sit behind the trigger, in terms of z-index, (with a little help from this page: How to get a parent element to appear above child) you don't even have to roll over the revealed div to scroll it, just stay hovering over the trigger and use your wheel, or whatever.

事实上，在最终确定如何制作显示的 div 之后，（尽管它现在是触发器的子级，而不是兄弟级），就 z-index 而言，坐在触发器后面（借助此页面的一点帮助）：如何让父元素出现在子元素上方）您甚至不必滚动显示的 div 来滚动它，只需将鼠标悬停在触发器上并使用您的滚轮或其他任何东西。

My revealed div covers most of the page, so this technique makes it a lot more permanent, rather than the screen flashing from one state to another with every move of the mouse. It's really intuitive actually, hence why I'm really quite proud of myself.

我显示的 div 覆盖了大部分页面，所以这种技术使它更持久，而不是随着鼠标的每一次移动屏幕从一种状态闪烁到另一种状态。它实际上非常直观，因此我为自己感到非常自豪。

The only downside is that you can't put links within the whole thing, but you can use the whole thing as one big link.

唯一的缺点是你不能把链接放在整个东西中，但你可以把整个东西当作一个大链接。

Answer 5

回答by nascosto

This answer doesn't require that you know the what type of display (inline, etc.) the hideable element is supposed to be when being shown:

这个答案不需要您知道可隐藏元素在显示时应该是什么类型的显示（内联等）：

.hoverable:not(:hover) + .show-on-hover {
    display: none;
}

<a class="hoverable">Hover over me!</a>
<div class="show-on-hover">I'm a block element.</div>

<hr />

<a class="hoverable">Hover over me also!</a>
<span class="show-on-hover">I'm an inline element.</span>

This uses the adjacent sibling selectorand the not selector.

这使用了相邻的兄弟选择器和非选择器。

Answer 6

回答by Tai Paul

I would like to offer this general purpose template solution that expands on the correct solution provided by Yi Jiang's.

我想提供这个通用模板解决方案，它扩展了 Yi Jiang's 提供的正确解决方案。

The additional benefits include:

额外的好处包括：

support for hovering over any element type, or multiple elements;
the popup can be any element type or set of elements, including objects;
self-documenting code;
ensures the pop-up appears over the other elements;
a sound basis to follow if you are generating html code from a database.

支持悬停在任何元素类型或多个元素上；
弹出窗口可以是任何元素类型或元素集，包括对象；
自记录代码；
确保弹出窗口出现在其他元素之上；
如果您要从数据库生成 html 代码，则有一个坚实的基础。

In the html you place the following structure:

在 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>

In the css you place the following structure:

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

A few points to note are:

需要注意的几点是：

Because the position of the div.popup is set to fixed (would also work with absolute) the content is not inside the normal flow of the document which allows the visible attribute to work well.
z-index is set to ensure that the div.popup appears above the other page elements.
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.

因为 div.popup 的位置被设置为固定的（也可以使用绝对值），所以内容不在文档的正常流中，这使得可见属性可以正常工作。
z-index 设置为确保 div.popup 出现在其他页面元素之上。
information_popup_container 设置为小尺寸，因此无法悬停。
此代码仅支持将鼠标悬停在 div.information 元素上。要支持将鼠标悬停在 div.information 和 div.popup 上，请参阅下面的 Hover Over The Popup。
它已经过测试，在 Opera 12.16 Internet Explorer 10.0.9200、Firefox 18.0 和 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.

其次，调整 div.popup 的位置，使其与 div.information 有重叠。几个像素足以确保 div.popup 可以在将光标移出 div.information 时接收悬停。

This does not work as expected with Internet Explorer 10.0.9200 and does work as expected with Opera 12.16, Firefox 18.0 and Google Chrome 28.0.15.

这在 Internet Explorer 10.0.9200 上无法按预期工作，在 Opera 12.16、Firefox 18.0 和 Google Chrome 28.0.15 上也能正常工作。

See fiddle http://jsfiddle.net/F68Le/for a complete example with a popup multilevel menu.

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

Answer 7

回答by Kamil Kie?czewski

The +allow 'select' only first not nested element , the >select nested elements only - the better is to use ~which allow to select arbitrary element which is child of parent hovered element. Using opacity/width and transition you can provide smooth appear

在+允许“选择”只有第一没有嵌套元素时，>只有选择嵌套的元素-更好的是使用~允许选择哪个是父母的孩子任意元素徘徊元素。使用不透明度/宽度和过渡，您可以提供平滑的外观

div { transition: all 1s }
.ccc, .ggg { opacity: 0; color: red}
.ccc { height: 0 }

.aaa:hover ~ .bbb .ccc { opacity: 1; height: 34px }
.aaa:hover ~ .eee .fff .ggg { opacity: 1 }

<div class="aaa">Hover me... to see<br><br> </div>

<div class='bbb'>BBBBB
  <div class='ccc'>CCCCC
    <div class='ddd'>DDDDD</div>
  </div>
</div>

<div class='eee'>EEEEE
  <div class='fff'>FFFFF
    <div class='ggg'>GGGGG</div>
    <div class='hhh'>HHHHH</div>
  </div>
</div>

Answer 8

回答by Mehdi Raash

please test this code

请测试此代码

<!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>

Answer 9

回答by hachpai

For me, if I want to interact with the hidden div without seeing it disappear each time I leave the triggering element (a in that case) I must add:

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

div:hover {
    display: block;
}

Answer 10

回答by Basj

Based on the main answer, this is an example, useful to display an information tooltip when clicking on a ?near a link:

根据主要答案，这是一个示例，可用于在单击?链接附近时显示信息工具提示：

document.onclick = function() { document.getElementById("tooltip").style.display = 'none'; };

document.getElementById("tooltip").onclick = function(e) { e.stopPropagation(); }

document.getElementById("help").onclick = function(e) { document.getElementById("tooltip").style.display = 'block';
e.stopPropagation(); };

#help { opacity: 0; margin-left: 0.1em; padding: 0.4em; }
    
a:hover + #help, #help:hover { opacity: 0.5; cursor: pointer; }

#tooltip { border: 1px solid black; display: none; padding: 0.75em; width: 50%; text-align: center; font-family: sans-serif; font-size:0.8em; }

<a href="">Delete all obsolete informations</a><span id="help">?</span>
<div id="tooltip">All data older than 2 weeks will be deleted.</div>

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

提问by tetris

回答by Yi Jiang

回答by n00b

回答by Timothy

回答by Edd Tillen

回答by nascosto

回答by Tai Paul

A few points to note are:

需要注意的几点是：

Hover Over The Popup

将鼠标悬停在弹出窗口上

回答by Kamil Kie?czewski

回答by Mehdi Raash

回答by hachpai

回答by Basj

相关推荐

最近更新

标签

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

提问by tetris

回答by Yi Jiang

回答by n00b

回答by Timothy

回答by Edd Tillen

回答by nascosto

回答by Tai Paul

A few points to note are:

需要注意的几点是：

Hover Over The Popup

将鼠标悬停在弹出窗口上

回答by Kamil Kie?czewski

回答by Mehdi Raash

回答by hachpai

回答by Basj

相关推荐

CSS 用css隐藏检查单选按钮

什么是 foo？我在许多 CSS 和 Web 设计示例中看到过

仅使用 css 样式选择下拉列表

使用 CSS 从右侧偏移背景图像

相关推荐

最近更新

标签