如何在悬停在按钮上时显示文本列表？

问题描述：

正如标题所述，当我将鼠标悬停在按钮上方时，我想显示文本列表（准确地说，名称为5-10个游戏）。如何在悬停在按钮上时显示文本列表？

CSS：

.buttons a { 
    float:left; 
    margin-left:40px; 
    margin-bottom:40px; 

    } 
    .buttons label { 
    position:relative; 
    top:40px; 
    } 
    .ghost-button { 
    min-width: 220px; 
    min-height: 200px; 
    padding: 48px; 
    color: #fff; 
    font-size: 78px; 
    font-family: 'Lato', sans-serif; 
    background:linear-gradient(0deg,rgba(0,0,0,0.0),rgba(0,0,0,0.0)),url(http://wallpapershome.com/images/pages/pic_hs/8253.jpg); 
    background-size: cover; 
    border: 2px solid #fff; 
    text-align: center; 
    display:table-cell; 
    vertical-align:middle; 
    outline: none; 
    text-decoration: none; 
    transition: background-color 0.2s ease-out, 
    border-color 0.2s ease-out; 
    } 

    .ghost-button:hover { 
    background: #333; 
    color: white; 
    font-size: 28px; 
    text-align: center; 
    transition: .5s ease; 
    }

HTML：

<div class="buttons"> 
    <a class="ghost-button" href="#"><label>Horror</label></a> 
</div>

我想标签徘徊后消失。我想显示一个游戏名称列表，最好在项目符号。列表的选项将是可点击的，即它们将用户重定向到另一个页面。

非常感谢！

“我想显示游戏名称的列表，最好是在子弹。”代码在哪里？ –

这就是我正在努力实现的，对不起，如果帖子让你困惑。我想在鼠标悬停在按钮后显示一个列表（以项目符号）。这是该页面：http://game-finder.000webhostapp.com/topten.html – VenoM

我们不打算去检查您的网站的源代码。请在这里发布相关的代码，在你的问题。 –

答

您可以创建一个列表，并将它设置为显示：默认为无。一旦用户将鼠标悬停在.ghost按钮上，该列表将可见，并且默认标签将被隐藏。

以下是我如何做到这一点。

HTML

<div class="buttons"> 
    <a class="ghost-button" href="#"><label>Horror</label> 
    <ul> 
     <li>item 1</li> 
     <li>item 2</li> 
     <li>item 3</li> 
     <li>item 4</li> 
    </ul></a> 
</div>

CSS

.buttons a { 
    float:left; 
    margin-left:40px; 
    margin-bottom:40px; 
} 

.buttons label { 
    position:relative; 
    top:40px; 
} 

.ghost-button { 
    min-width: 220px; 
    min-height: 200px; 
    padding: 48px; 
    color: #fff; 
    font-size: 78px; 
    font-family: 'Lato', sans-serif; 
    background:linear-gradient(0deg,rgba(0,0,0,0.0),rgba(0,0,0,0.0)),url(http://wallpapershome.com/images/pages/pic_hs/8253.jpg); 
    background-size: cover; 
    border: 2px solid #fff; 
    text-align: center; 
    display:table-cell; 
    vertical-align:middle; 
    outline: none; 
    text-decoration: none; 
    transition: background-color 0.2s ease-out, 
    border-color 0.2s ease-out; 
} 

.ghost-button:hover { 
    background: #333; 
    color: white; 
    font-size: 28px; 
    text-align: center; 
    transition: .5s ease; 
} 

.ghost-button:hover label { 
    display: none; 
} 

.ghost-button ul { 
    display: none; 
} 

.ghost-button:hover ul { 
    display: block; 
}

工作实例https://codepen.io/anon/pen/zzOzaE

这就是我一直在寻找的！谢谢！ VenoM

答

您只需预先制作想要在悬停时显示的内容，然后将其默认为不显示。使用CSS :hover伪类选择器，然后就可以表现出来：

div.hidden { display:none; } 
 

 
/* Target the hidden div when the target div is being hovered over */ 
 
#trigger:hover + div.hidden { 
 
display:block; 
 
}

<div id="trigger">Hover over me</div> 
 
<div class="hidden">I'm usually hidden</div>

如何在悬停在按钮上时显示文本列表？

相关推荐