【发布时间】：2021-06-02 21:32:17
【问题描述】：
有一个代码，当您将鼠标悬停在左侧的图标 .leftside 上时，应该隐藏中心的超链接 .centerplace 和右侧的不可见图片 .rightside
let sidemenu = document.querySelector('#sidemenu'); // We take the block from the menu
sidemenu.addEventListener('mouseenter', function(e) { // We hang the handler on the menu to use delegation
if(e.target.classList.contains('leftside')) { // If we aim at .leftside
e.target.closest('#sidemenu').classList.add('-short'); // we take the parent of the #sidemenu and attach a handler to it
}
}, true);
sidemenu.addEventListener('mouseleave', function(e) {
if(e.target.classList.contains('leftside')) {
e.target.closest('#sidemenu').classList.remove('-short');
}
}, true);* {
list-style: none;
text-decoration: none;
margin: 0;
padding: 0;
}
#sidemenu {
background: #afafaf;
display: inline-flex;
flex-direction: column;
display: block;
width: 420px;
border-right: 1px solid #000;
}
#sidemenu li {
padding: 6px 0;
background: #fff;
display: flex;
/*display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: space-between;*/
}
#sidemenu li:hover {
background: lightgreen;
}
#sidemenu li a {
color: #000;
}
#sidemenu li:hover a,
#sidemenu li:hover .fa {
color: #fff;
}
#sidemenu li .fa {
/*margin-left: 20px;
margin-right: 10px;*/
display: inline-block;
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.leftside {
margin-left: 16px;
display: inline-block;
width: 30px;
height: 30px;
display: flex;
}
.rightside {
margin-right: 16px;
/* display: none;*/
visibility: hidden;
width: 30px;
height: 30px;
display: inline-flex;
}
.centerplace {
width: 328px;
display: inline-flex;
align-items: center;
justify-content: center;
/*
transition: .6s;
overflow: hidden;
transform: translateX(-328px);
*/
}
.nestedblock{
display: inline-flex;
align-items: center;
justify-content: center;
margin:0 auto;
}
/*
#sidemenu.active .centerplace {
transform: translateX(0px);
transition-delay: .4s;
}
#sidemenu{
width: 60px;
}
#sidemenu.active{
width: 388px;
}
*/
/* Иное состояние */
/*
.leftside:hover + .centerplace,
.leftside:hover + .centerplace + .nestedblock,
.leftside:hover + .rightside{
display: none;
}
*/
#sidemenu.-short {
flex-direction: column;
}
#sidemenu.-short .centerplace,
#sidemenu.-short .centerplace .nestedblock,
#sidemenu.-short .rightside {
display: none;
}<html>
<head>
<link rel="stylesheet" href="testsite.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- <script>
document.addEventListener("DOMContentLoaded", function() {
let sidemenu = document.querySelector('#sidemenu');
sidemenu.addEventListener("mouseover", checkitem);
sidemenu.addEventListener("mouseleave", checkitem);
function checkitem(event) {
if (event.target && event.target.closest(".fa")) sidemenu.classList.add("active");
if (event.type === "mouseleave") sidemenu.classList.remove("active");
}
});
</script> -->
</head>
<!-- <link rel="stylesheet" href="testsite.js"> -->
<body>
<ul id="sidemenu">
<li>
<div class="leftside">
<i class="fa fa-home"></i>
</div>
<div class="centerplace">
<a href="" class="nestedblock">Test1</a>
</div>
<div class="rightside">
<i class="fa fa-home"></i>
</div>
</li>
<li>
<div class="leftside">
<i class="fa fa-home"></i>
</div>
<div class="centerplace">
<a href="" class="nestedblock">Test2</a>
</div>
<div class="rightside">
<i class="fa fa-home"></i>
</div>
</li>
<li>
<div class="leftside">
<i class="fa fa-home"></i>
</div>
<div class="centerplace">
<a href="" class="nestedblock">Test3</a>
</div>
<div class="rightside">
<i class="fa fa-home"></i>
</div>
</li>
<li>
<div class="leftside">
<i class="fa fa-home"></i>
</div>
<div class="centerplace">
<a href="" class="nestedblock">Test4</a>
</div>
<div class="rightside">
<i class="fa fa-home"></i>
</div>
</li>
</li>
</ul>
<script src="testsite3.js"></script>
</body>
</html>由于鼠标光标的移动之一，铭文从左侧开始高于图片。刻字应与房子的图纸高度相同。 .nestedblock 类必须正确对齐。
帮助实现正确的显示。
【问题讨论】：
标签： javascript html css web layout