为什么当我的媒体查询启动时我的悬停效果停止工作

Question

我一直在研究媒体查询，希望着手创建一个响应式页面。

我似乎已经开始工作了，但我注意到当我减小页面大小以满足有关较小屏幕的媒体查询时，我在导航栏

项中的悬停效果不再起作用...这只是在您减小屏幕尺寸时发生的事情还是在某处被覆盖了？

html {
  scroll-behavior: smooth;

}

body{
  font-family: 'Nunito';
  background: linear-gradient(#47585B, #E8EFF0);

}


h1 {
  letter-spacing: 2px;
}

h2 {
  letter-spacing: 2px;
  /* border: 1px solid black; */
}
/* Underline on Company Name */
h1::after{
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 0px;
  margin-top: 0.1em;
  padding-top: 0.25rem;
  background: linear-gradient(90deg, #47585B, #47585B20);
}
header {
  background-color: #e6763c90;
  box-sizing: border-box;
  padding: 0 2rem;
  box-shadow: 2px 0px 100px 10px #e6763c90;
  text-align: center;
  position: fixed;
  top: 0px;
  right: 0px;
  width: 100vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
}

ul {
  margin: 0;
  padding: 20px;
  list-style: none;
  /* border: 1px solid black; */

}

a {
  color: black;
  text-decoration: none;
}
li {
  display: inline-block;
  padding: 7px;
  margin: 0 0 0 2.5em;
  text-align: center;
  border-radius: 5px;
  transition: all 0.2s ease;
}

.container {
  height: 70vh;
  padding: 10rem;
  text-align: center;
  /* border: 1px solid black; */

}

.dropDown{
  display: none;
}

/* On hover animations */
li:hover{
  transform: scale(1.08);
}

/* Smaller Screen */

@media (max-width: 1100px) {
  header {
    background-color: #e6763c90;
    box-sizing: border-box;
    padding-left: 0.25rem;
    right: 0px;
    text-align: center;
    position: fixed;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }

  li {
    display: inline;
    margin: 2rem;
    z-index: 1000;
  }

  ul {
    position: relative;
        bottom: 1.4rem;
  }
  
/* Adjust underline on smaller screen */

  h1::after{
    content: "";
    display: none;
    position: absolute;
    width: 100%;
    margin-top: 1.5em;
    left: 0;
    height: 0px;
    padding-top: 0.25rem;
    background: #47585B
}

li::after{
    content: "";
    position: absolute;
    width: 100%;
    margin-top: 1.5em;
    left: 0;
    height: 0px;
    padding-top: 0.25rem;
    background: linear-gradient(90deg, #47585B, #47585B20);
    z-index: 10000;
  }
}

/* Mobile */

@media (max-width: 800px) {
  header {
    background-color: #e6763c90;
    box-sizing: border-box;
    padding-left: 0.25rem;
    right: 0px;
    text-align: center;
    position: fixed;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }


  .navbar {
    display:none;
    margin:1.2rem;
  }


/* Adjust underline on mobile */
  h1::after{
    content: "";
    position: absolute;
    width: 100%;
    margin-top: 0.1em;
    left: 0;
    height: 0px;
    padding-top: 0.25rem;
    background: #47585B
  }
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito" rel="stylesheet">
    <link href="styleSheet.css" rel="stylesheet"></link>
    <title>Original Tombstones</title>
  </head>
  <body>
<header>
  <h1 class=""><a href="#home">Original Tombstones</a></h1>
  <ul class="navbar">
    <li><a href="#new">New Memorials</a></li>
    <li><a href="#additionals">Additionals</a></li>
    <li><a href="#renovations">Renovations</a></li>
    <li><a href="#contact">Contact Us</a></li>
  </ul>
</header>
<div class="container" id="home">
  <h2>About Us</h2>
</div>
<div class="container" id="new">
  <h2>New Memorials</h2>
</div>
<div class="container" id="additionals">
  <h2>Additional Inscriptions</h2>
</div>
<div class="container" id="renovations">
  <h2>Renovations</h2>
</div>
<div class="container" id="contact">
  <h2>Get In Touch</h2>
</div>

  </body>
</html>

如果我的代码看起来很乱，我提前道歉，但我还没想好！

干杯！

Answer 1

所以没有 media-query 你已经将 <li> 元素设置为 display: inline-block; 现在你的 li:hover{transform: scale(1.08);} 工作正常。

但随后在您的 media-queries 之一中，您将 <li> 元素设置为 display: inline;。不太确定为什么困难，猜猜你想要什么也可以与 inline-block 一起使用，这现在打破了缩放比例。如果您只是删除 media-query 中的 display:inline; 行，您的悬停问题将得到解决。

Answer 2

尝试添加以下关键字：only, screen on the media queeries ex:

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

还在您的 html 头上添加以下元标记：

<meta name="viewport" content= "width=device-width, initial-scale=1.0">

https://www.w3schools.com/css/css_rwd_viewport.asp

为什么当我的媒体查询启动时我的悬停效果停止工作

Why do my hover effects stop working when my media queries kick in

html

css

hover

media-queries