javascript - CSS)为什么我的“悬停”不起作用?我搜索了谷歌,但我无法修复它
问题描述
我首先设置.submenu
为display:none;
. 然后我设置.recipe:hover .submenu{display:block;}
. 当我将鼠标悬停在 上时.recipe
,我想做.submenu
display: block;
. 但它不起作用。你能告诉我为什么它不起作用吗?我实在想不通。使用javascript是我解决这个问题的唯一方法吗?这是我的代码。谢谢
<!DOCTYPE html>
<html>
<meta charset="utf-8">
</html>
<head>
<title>
TEST
</title>
<style>
body{
margin: 0px;
}
#logo{
height: 56px;
padding-top: 15px;
padding-left: 45px;
font-size: 17px;
font-weight: 500;
}
.title{
padding-left: 30px;
padding-bottom: 15px;
}
.mainmenu{
border: 1px solid rgb(155,155,155);
text-align: center;
height: 30px;
padding-top: 17px;
padding-bottom: 5px;
font-size: 17px;
font-weight: 400;
display: flex;
list-style-type: none;
margin: 0px;
padding-top: 11px;
}
a:nth-of-type(1){
flex-grow: 1;
border-right: 1px solid rgb(155,155,155);
}
a:nth-of-type(2){
flex-grow: 1;
border-right: 1px solid rgb(155,155,155);
}
a:nth-of-type(3){
flex-grow: 1;
}
.submenu{
background-color: #f2efed;
height: 190px;
font-size: 16px;
font-weight: 300;
padding-top: 10px;
padding-left: 10px;
text-decoration: underline;
position: absolute;
margin-top: 36px;
width: 100%;
display: none;
}
a{
color: black;
text-decoration: none;
}
.recipe:hover .submenu{
display: block;
}
@font-face { font-family: 'IBMPlexSansKR-Light'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/IBMPlexSansKR-Light.woff') format('woff'); font-weight: normal; font-style: normal; }
</style>
</head>
<body>
<div id="logo">
<img width=45px src="icons8-solo-cup-100.png">
<span class="title">cafe in my home</span>
</div>
<div class="mainmenu">
<a href="Home.html">home</a>
<a href="Recipe.html">Recipe</a>
<a href="QNA.html">QNA</a>
<div class="submenu">
coffee
</div>
</div>
</body>
解决方案
我不是最好的,但我想说这可能与选择.recipe:hover
然后.submenu
在它之后选择有关:
.recipe:hover .submenu{
display: block;
}
推荐阅读
- c - 程序正在跳过 while 循环以读取文件中的每一行
- ios - 约束 UIView 内的标签,该标签位于可扩展的 collectionViewCell 内
- laravel - Laravel / Vue - App.js import 和 require 之间的区别
- android - 线程“main”中的异常 java.lang.UnsupportedClassVersionError - 在 android 中使用 BundleTool 提取包 apk 时
- pandas - Pandas groupby 对每个组的值进行排序,并根据每个组的最大值对数据框组进行排序
- java - 从 HTML 文本中获取特定值
- pandas - 彼此相邻绘制直方图
- excel - Excel 每新一周将索引递增 1
- firebase - 如何检查文件名是否包含 Firebase 存储安全规则中的 uid?
- django - 具有不同路径的 django 静态文件