问题描述
有一段代码,当您将鼠标悬停在左侧图标 .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
类必须正确对齐。
帮助实现正确显示。
解决方法
- 如果你选择了 bootstrap,你应该明白这是一个框架。我的意思是你应该明白你必须只选择它建议的工具。而且没有你说的那些东西。所以其他的一切都是硬编码
- 你是俄罗斯人,为什么不使用 BEM?))
- 我不确定你想匹配什么,但如果我理解正确的话,这里是
<html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <style> * { list-style: none; text-decoration: none; margin: 0; padding: 0; } #sidemenu { background: #afafaf; display: inline-flex; /* flex-direction: column; why column if you want horizontal? */ flex-direction: row; /* display: block; why you overwrite display: inlin-flex by display: block?? */ width: 420px; border-right: 1px solid #000; } #sidemenu.-short { flex-direction: column; } #sidemenu.-short .centerplace,#sidemenu.-short .centerplace .nestedblock,#sidemenu.-short .rightside { display: none; } #sidemenu li { padding: 6px 0; background: #fff; display: flex; flex-shrink: 1; /* i added this */ /*display: inline-flex; flex-direction: row; align-items: center; justify-content: space-between;*/ } #sidemenu li:hover { background: lightgreen; flex-shrink: 0; width: 328px; transition: 0.5s; } #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; i removed this */ 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; } */ </style> </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> let sidemenu = document.querySelector('#sidemenu'); // We take the block from the menu </script> </body> </html>