如何修复悬停效应
提问于 2020-05-08 21:42:12
我正在构建一个导航栏和代码，如果在桌面模式下没问题的话。当我在移动设备上使用媒体查询时，媒体查询中的悬停效果与桌面版本中的相同。我不知道我做错了什么，也不知道如何弥补。
background: #232323;
height: 66px;
color: #ffff;
box-shadow: 2px 2px 5px green;
position: fixed;
width: 100%;
}
header .logo {
float: left;
height: inherit;
margin-left: 3em;
margin-bottom: 3em;
text-shadow: 2px 2px 2px black;
}
header .logo-text {
margin: 8px;
}
header .logo-text span {
color: #cfe333;
font-family: 'Abril Fatface', cursive;
}
header ul {
float: right;
margin: 0px;
padding: 0px;
list-style: none;
}
header ul li {
float: left;
position: relative
}
header ul li ul {
position: absolute;
top: 66px;
right: 0px;
width: 180px;
display: none;
}
header ul li ul li {
width: 100%;
background: #cfe333;
}
header ul li ul:hover {
background: #0000;
width: 180px;
height: 66px;
}
header ul li ul li a {
padding: 10px;
color: #fffff;
height: 66px;
}
header ul li {
display: block;
padding: 21px;
font-size: 1.1em;
}
header ul li:hover {
background: #010101;
color: #cfe333;
}
header ul li a:hover {
color: #cfe333;
transition: 0.5s;
}
header .menu-toggle {
display: none;
}
header ul li a {
text-decoration: none;
color: #fff;
font-size: 1.2em;
text-shadow: 2px 2px 2px black;
}
.fas fa-bars menu-toggle {
color: white;
}
/* Media Queries */
@media only screen and (max-width: 750px) {
header ul {
width: 100%;
background: #232323;
font-size: .8em;
margin-top: 0;
position: absolute;
top: 68px;
}
header ul li {
width: 100%;
}
header ul li ul {
position: static;
display: block;
width: 100%;
left: 0;
margin-top: 30px;
}
header ul li ul li a {
padding: 10px;
color: #fffff;
height: 66px;
width: 100%;
}
header ul li ul li a:hover {
width: 100%;
}
}
</style>
</head>
<body>
<header>
<div class="logo">
<h1 class="logo-text"><span>IM</span> Learning Project</h1>
<link rel="stylysheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity=""
crossorigin="anonymous">
</div>
<i class="fas fa-bars menu-toggle"></i>
<ul class="nav">
<li><a href="#rewards"><i class="far fa-star"></i> Rewards</a></li>
<li><a href="#connect"><i class="fas fa-user-friends"></i> Connect</a></li>
<li><a href="#watch"><i class="fas fa-video"></i> Watch</a></li>
<li>
<a href="#"><i class="fas fa-user"></i> Sign Up <i class="fas fa-chevron-down" style="font-size: .8em;"></i></a>
<ul>
<li><a href="#">Dashboard</a></li>
<li><a href="#" class="logout">Logout</a></li>
</ul>
</li>
</ul>
</header>我试图用这段代码做的是让列表项保持全宽悬停，以供媒体查询。
提前感谢您的帮助！
回答 1
Stack Overflow用户
发布于 2020-05-08 22:58:50
我通过向媒体提问来解决这个问题：
header ul li ul:hover {
background: #0000;
width: 180px;
height: 66px;
}
}```页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61688574
复制相关文章
点击加载更多
腾讯云开发者
