时间戳

首页 > 解决方案 > 标题相对于图片的偏移量

javascript - 标题相对于图片的偏移量

问题描述

有一个代码，当您将鼠标悬停在左侧的图标上时，应该隐藏.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必须正确对齐。

看到这个

帮助实现正确的显示。

标签： javascripthtmlcssweblayout

解决方案

  1. 如果您选择引导程序，您应该了解这是框架。我的意思是你应该明白你必须只选择它建议的工具。而且没有你说的那些东西。所以其他的一切都是硬编码的
  2. 你是俄罗斯人，为什么不使用 BEM？））
  3. 我不确定你想匹配什么，但如果我理解正确的话，那就是 
    <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>

推荐阅读