个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我的悬停代码仅适用于特定的缩放尺寸，即所有框的 67%。然而，当我放大到 80% 时，只有两个工作。当我放大到 100% 时，只有一个有效。我将提供使用的零件。我需要我的代码来显示不同放大中主导航框的位置，请帮忙。这是 HTML 和 CSS 代码，谢谢:
HTML...
<div class="row">
<div class="logo">
<img src="LogoSmall.jpg">
</div>
<ul class="main-nav">
<li class="active"><a>Sell Your House</a></li>
<li><a href="">How It Works</a></li>
<li><a href="">Compare</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact Us</a></li>
<li><a href="">FAQ</a></li>
</ul>
</div>
<div class="title">
<h1>Sell Your House Today<br>
Get Started Now...</h1>
<div class="button">
<a href="" class="btn btn-one">Get Started</a>
<a href="" class="btn btn-two">Learn More</a>
</div>
</div>
</header>
CSS...
.main-nav
{
float: right;
list-style: none;
margin-top: 30px;
}
header
{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(HouseJPEG.jpeg);
height: 100vh;
background-size: cover;
background-position: center;
}
.main-nav li
{
display: inline-block;
}
.main-nav li a
{
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", sans-serif;
font-size: 15px;
}
.main-nav li.active a
{
border: 1px solid white;
}
.main-nav li a:hover
{
border: 1px solid white;
}
.logo img
{
width: 140px;
height: auto;
float: left;
}
body
{
font-family: monospace;
}
.row
{
max-width: 1200px;
margin: auto;
}
最佳答案
我对编程和这个网站有点陌生。我复制了您的代码，对我来说效果很好。我现在使用的是谷歌浏览器，无论放大多少，悬停效果始终有效。您可以尝试通过以下方式指定区域中的视口(viewport):
<!DOCTYPE html>
<html>
<head>
<title>Your Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
!DOCTYPE html 是告诉浏览器使用 HTML5，但您真正应该看的是元视口(viewport)。希望对您有所帮助
关于html - 主导航li a :hover not working when I change the zoom size，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50827597/
25
4
0
我是一名优秀的程序员,十分优秀！