Question

正如标题所述，当我将鼠标悬停在按钮上时，我想显示一个文本列表（确切地说，是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>

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

非常感谢！

Answer 1

你所要做的就是预先制作你想要在悬停时显示的内容，然后默认它不显示。然后使用:hover CSS伪类选择器，您可以显示它：

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>

Answer 2

您可以创建一个列表，并将其设置为display：none默认情况下。一旦用户将鼠标悬停在.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

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

2 个答案: