如何在懸停在按鈕上時顯示文本列表？

正如標題所述，當我將鼠標懸停在按鈕上方時，我想顯示文本列表（準確地說，名稱爲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>

我想標籤徘徊後消失。我想顯示一個遊戲名稱列表，最好在項目符號。列表的選項將是可點擊的，即它們將用戶重定向到另一個頁面。

非常感謝！

來源

2017-06-01 VenoM

「我想顯示遊戲名稱的列表，最好是在子彈。」代碼在哪裏？ –

這就是我正在努力實現的，對不起，如果帖子讓你困惑。我想在鼠標懸停在按鈕後顯示一個列表（以項目符號）。這是該頁面：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

來源

2017-06-01 18:14:30 Axion

這就是我一直在尋找的！謝謝！ <3 – 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>

來源

2017-06-01 18:08:10

如何在懸停在按鈕上時顯示文本列表？

回答

相關問題