如何解决如何仅使用CSS的垂直菜单按钮显示特定内容?
我正在尝试显示具有特定菜单的特定div
内容,但是我的代码却没有那样显示。对于参考附件截图。(仅适用于CSS)。我不想使用JS。当我将鼠标悬停在特定菜单上时,将显示所有div
内容。而且设计看起来不太好。
这是我的代码:
<style>
.menu {
height: 24%;
width: 600px;
margin: auto;
border: 1px solid RGBA(0,0.4);
font-family: calibri,monospace;
}
div.menu .button {
padding:5px 0px 5px 0px;
display:block;
cursor: pointer;
text-align:center;
width: 150px;
height: 50%;
background: #333;
border: 1px solid white;
color: #e7e7e7;
font-weight: 600;
}
div.menu .button:hover {
padding:5px 0px 5px 0px;
display:block;
cursor: pointer;
text-align:center;
width: 150px;
height: 50%;
background: #ff0000;
border: 1px solid white;
color: #e7e7e7;
font-weight: 600;
}
.menu .content {
position:absolute;
display:none;
width: 440px;
height: 23%;
margin-left: 155px;
border: 1px solid #e7e7e7;
}
.menu .content:hover {
left:150px;
top:0px;
color:black;
display:block;
}
.menu .button:hover:focus:active ~ div.content {
display: block;
}
html {
width: 100%;
height: 100%;
display: flex;
}
body {
display: flex;
margin: auto;
}
</style>
<body>
<div class="menu">
<div tabindex="0" class="button">Home</div>
<div class="content">
“A house is made of bricks and beams. A home is made of hopes and dreams. Home is where our story begins…”
</div>
<div tabindex="0" class="button">Contact</div>
<div class="content">
“Contacts added but not one is worthy enough to remain as their priority.”
</div>
<div tabindex="0" class="button">About</div>
<div class="content">
“To be yourself in a world that is constantly trying to make you something else is the greatest accomplishment.”
</div>
</div>
</body>
</html>
This是我的图片链接。
解决方法
请尝试这个
function updateQuantity(itemId) {
// here I will use jQuery just to show the idea
const route = $('#updateQuantityRoute' + itemId);
const newQuantity = $('#quantity' + itemId).val();
$.post(route,{'quantity': newQuantity}).done(function( data ) {
// here we have response
if (typeof data === 'string') data = JSON.parse(data);
const updatedTotal = data.total;
$('#total' + itemId).innerText = updatedTotal; // update in DOM
});
}
.menu {
height: 24%;
width: 600px;
margin: auto;
border: 1px solid RGBA(0,0.4);
font-family: calibri,monospace;
position:relative;
}
div.menu .button {
padding:5px 0px 5px 0px;
display:block;
cursor: pointer;
text-align:center;
width: 150px;
height: 50%;
background: #333;
border: 1px solid white;
color: #e7e7e7;
font-weight: 600;
}
div.menu .button:hover {
padding:5px 0px 5px 0px;
display:block;
cursor: pointer;
text-align:center;
width: 150px;
height: 50%;
background: #ff0000;
border: 1px solid white;
color: #e7e7e7;
font-weight: 600;
}
.menu .content {
position:absolute;
display:none;
width: 440px;
opacity:0;
margin-left: 155px;
border: 1px solid #e7e7e7;
}
.menu .button:hover+.content {
display: inline-block;
opacity:1;
transition:display 3s;
top:0;
}
html {
width: 100%;
height: 100%;
display: flex;
}
body {
display: flex;
margin: auto;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。