尝试使用@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>