嘗試使用@media 屏幕和懸停創建下拉菜單

Question

我正在嘗試根據屏幕大小調整我網站的布局。 我希望我的帶有圖像的按鈕在您將鼠標懸停在它們上方時具有下拉菜單，但是我將類名放在dropdown-btn然后懸停，但它沒有響應。 是不是一些語法錯誤？

 @media screen and (min-width: 1900px) { .sidenav{ display: inline-block; position: relative; left: auto; width: auto; height: 100px; } .sidenav-free-text{ display: none; } .dropdown-container { display: none; } .dropdown-btn:hover .dropdown-container a{ display: block; visibility: visible; } .dropdown-btn{ width: 8.87%; display: inline-block; } .dropdown-btn img { width: 100%; } .dropdown-container { display: none; position: absolute; z-index: 1; } }

 <div class="sidenav"> <div class="sidenav-free-text"> <p>text.</p> </div> <a onclick="PlayMusicFinishedHTML('Home')" onmouseover="playMusicHover()" >Microsoft και MS-DOS (1974-1981)</a> <button class="dropdown-btn"><img src="../../../images\\Windows banners\\Windows1.0.png" alt="win1.0" onclick="PlayMusicFinishedHTML()" onmouseover="playMusicHover()"> </button> <div class="dropdown-container"> <a onclick="PlayMusicFinishedHTML('Windows DR5')" onmouseover="playMusicHover()">Windows DR5 (01/11/1984)</a> <a onclick="PlayMusicFinishedHTML('Windows PRE')" onmouseover="playMusicHover()">Windows Premiere Edition (30/07/1985)</a> <a onclick="PlayMusicFinishedHTML('Windows 1.04')" onmouseover="playMusicHover()" style="background-image: radial-gradient(circle, red, green, blue, yellow);">Windows 1.04 (08/04/1987)</a> </div>

Answer 1

您的代碼存在一些問題，我將逐一介紹。

1. (min-width: 1900px)

這讀作“當頁面寬度至少為 1900 像素時應用以下樣式”。 這意味着你必須有一個非常廣泛的瀏覽器才能看到應用的樣式。 我相信你有這個倒退，並希望在屏幕小時應用樣式。 您只需將媒體查詢更改為使用max-width即可完成此操作。

@media screen and (max-width: 800px) {

2. 選擇器.dropdown-btn:hover .dropdown-container a

這里有幾件事。 .dropdown-container是.dropdown-btn的兄弟，而不是孩子。 您還隱藏.dropdown-container ，而不是a元素。 使用相鄰的同級組合器並將樣式應用於下拉容器：

.dropdown-btn:hover + .dropdown-container { }

有了這些變化，我相信你會更接近你的想法。 請注意，為了便於閱讀，我稍微簡化了您的 HTML。

 @media screen and (max-width: 800px) { .sidenav { display: inline-block; position: relative; left: auto; width: auto; height: 100px; } .sidenav-free-text { display: none; } .dropdown-container { display: none; } .dropdown-btn:hover + .dropdown-container { display: block; } .dropdown-btn { display: inline-block; } .dropdown-btn img { width: 100%; } .dropdown-container { display: none; position: absolute; z-index: 1; } }

 <div class="sidenav"> <div class="sidenav-free-text"> <p>text.</p> </div> <a>Microsoft και MS-DOS (1974-1981)</a> <button class="dropdown-btn">Hover me</button> <div class="dropdown-container"> <a>Windows DR5 (01/11/1984)</a> <a>Windows Premiere Edition (30/07/1985)</a> <a style="background-image: radial-gradient(circle, red, green, blue, yellow);">Windows 1.04 (08/04/1987)</a> </div> </div>