鼠标事件实现提示信息显隐

1.Tooltips：

HTML

<span class="tooltip-toggle" data-tooltip="Sample text for your tooltip!">
  Label for your tooltip
</span>

CSS

.tooltip-toggle {
  cursor: pointer;
  position: relative;
}
.tooltip-toggle::before {
  top: -80px;
  left: -80px;
  background-color: #2B222A;
  border-radius: 5px;
  color: #fff;
  content: attr(data-tooltip);
  padding: 1rem;
  text-transform: none;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  width: 160px;
}
.tooltip-toggle::after {

  content: " ";

top: -12px; left: 9px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #2B222A; width: 0;}.tooltip-toggle::before, .tooltip-toggle::after {

  position: absolute;
  color: #efefef;
  font-family: monospace;  //字体等宽大小
  font-size: 16px;
  opacity: 0;
  pointer-events: none;   //鼠标移不上去元素，只能通过鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。
  text-align: center;
}
.tooltip-toggle:hover::before, .tooltip-toggle:hover::after {
  opacity: 1;
  -webkit-transition: all 0.75s ease;
  transition: all 0.75s ease;
}

2.下拉菜单：

HTML

<div class="nav-container">
  <ul class="nav-items">
    <!-- Navigation -->
    <li class="nav-item"><a href="#">Home</a></li>
    <li class="nav-item"><a href="#">About</a></li>
    <li class="nav-item"><a href="#">Contact</a></li>

    <!-- Dropdown menu -->
    <li class="nav-item nav-item-dropdown">
      <a class="dropdown-trigger" href="#">Settings</a>
      <ul class="dropdown-menu">
        <li class="dropdown-menu-item">
          <a href="#">Dropdown Item 1</a>
        </li>
        <li class="dropdown-menu-item">
          <a href="#">Dropdown Item 2</a>
        </li>
        <li class="dropdown-menu-item">
          <a href="#">Dropdown Item 3</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

CSS

ul,li{
list-style: none;
-webkit-padding-start: 0;
}
.nav-container {
 background-color: #fff;
 border-radius: 4px;
 box-shadow: 0px 0px 2px 0 rgba(153, 153, 153, 0.35);
 display: block;
 padding: 10px;
 max-width: 400px;
 margin: 0 auto;
 text-align: center;
}
a {
text-decoration: none;
color: #ED3E44;
}


.nav-item {
padding: 1em;
display: inline;
}


.nav-item-dropdown,.dropdown-trigger {
  position: relative;
}
.nav-item-dropdown:hover > .dropdown-menu {
 display: block;
 opacity: 1;
}


.dropdown-trigger::after {
 content: "›";
 position: absolute;
 color: #ED3E44;
 font-size: 24px;
 font-weight: bold;
 -webkit-transform: rotate(90deg);
 transform: rotate(90deg);
 top: -5px;
 right: -15px;
}


.dropdown-menu {
 background-color: #ED3E44;
 text-align: right;
 position: absolute;
 top: 2.5rem;
 right: -10px;
 display: none;
 opacity: 0;
 -webkit-transition: opacity 0.5s ease;
 transition: opacity 0.5s ease;
 width: 160px;
}
.dropdown-menu a {
 color: #fff;
}


.dropdown-menu-item {
 cursor: pointer;
 padding: 1em;
 text-align: center;
}
.dropdown-menu-item:hover {
 background-color: #eb272d;
}
.dropdown-trigger:focus + .dropdown-menu,.dropdown-trigger:hover + .dropdown-menu {
display: block;
opacity: 1;
 }
 .dropdown-menu-item {
 cursor: pointer;
 padding: 1em;
 text-align: center;
 
 
}.dropdown-menu-item:hover {
background-color: darken(#ED3E44, 5%);
 }