首页 文章

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

提问于
浏览 次
251

当有人在 <a> 元素上盘旋时，我想展示div，但我想在CSS而不是JavaScript中执行此操作 . 你知道怎么做到这一点吗？

css

11 回答

  • 24

    您可以执行类似this的操作：

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

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

    这使用adjacent sibling selector，并且是suckerfish dropdown menu的基础 .

    HTML5允许锚元素几乎包装任何东西，因此在这种情况下， div 元素可以成为锚的子元素 . 否则原理是相同的 - 使用 :hover 伪类来更改另一个元素的 display 属性 .

    回复于
  • 4
    .showme {
  display: none;
}

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

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

    jsfiddle

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

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

    这一切都取决于你需要的东西 . 对于菜单样式场景，此方法更好，而Yi Jiang对于工具提示更好 .

    回复于
  • 1

    我发现使用不透明度更好，它允许你添加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>
    回复于
  • 442

    我知道这意味着一位专家，但我为自己做了一些关于这段代码的事情感到非常自豪 . 如果你这样做：

    div {
    display: none;
}

a:hover > div {
    display: block;
}

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

    也许这对于大量的事情没有用，但是我必须将我显示的div设置为溢出：auto，所以有时它有滚动条，一旦你离开div就不能使用它 .

    事实上，在最终弄清楚如何制作显示的div之后（尽管它现在是触发器的子节点，而不是兄弟节点），在z-index方面坐在触发器后面（在此页面的帮助下） ：How to get a parent element to appear above child）你甚至不必滚动显示的div来滚动它，只是停留在触发器上并使用你的轮子，或者其他什么 .

    我透露的div覆盖了页面的大部分内容，因此这种技术使其更加永久，而不是每次移动鼠标时屏幕从一个状态闪烁到另一个状态 . 实际上它非常直观，因此我为自己感到非常自豪 .

    唯一的缺点是你不能把链接放在整个事物中，但你可以将整个事物作为一个大的链接 .

    回复于
  • 28

    我想提供这个通用的模板解决方案，扩展到易江提供的正确解决方案 .

    其他好处包括：

    • 支持将鼠标悬停在任何元素类型或多个元素上;

    • 弹出窗口可以是任何元素类型或元素集，包括对象;

    • 自我记录代码;

    • 确保弹出窗口显示在其他元素上;
      如果从数据库生成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的位置设置为fixed（也适用于绝对值），所以内容不在文档的正常流程内，这使得visible属性可以正常工作 .

    • z-index设置为确保div.popup出现在其他页面元素上方 .

    • information_popup_container设置为小尺寸，因此无法悬停 .

    • 此代码仅支持将鼠标悬停在div.information元素上 . 要支持将鼠标悬停在div.information和div.popup上，请参阅下面的悬停在弹出窗口上方 .

    • 它已在Opera 12.16 Internet Explorer 10.0.9200，Firefox 18.0和Google Chrome 28.0.15中经过测试并正常运行 .

    将鼠标悬停在弹出窗口上

    作为附加信息 . 当弹出窗口包含您可能想要剪切和粘贴的信息或包含您可能想要与之交互的对象时，请先替换：

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

    同

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

    第二，调整div.popup的位置，以便与div.information重叠 . 几个像素足以确保div.popup可以在接收时悬停把cusor从div.information中移开 .

    这与Internet Explorer 10.0.9200无法正常工作，并且与Opera 12.16，Firefox 18.0和Google Chrome 28.0.15一样正常工作 .

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

    回复于
  • 13

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

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

    这使用adjacent sibling selector和not selector .

    回复于
  • 2

    请测试此代码

    <!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>
    回复于
  • 13

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

    div:hover {
    display: block;
}
    回复于
  • 186

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

    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>
    回复于
  • 0

    HTML

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

    CSS

    div+div {
    display: none;
 }

 div:hover +div {
   display: block;
 }

    CodePen :hover on div show text in another div

    回复于
  • -1

    从我使用这个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，则它将无法工作 .

    回复于

相关问题