Question

我需要将鼠标悬停图像添加到垂直菜单的帮助。我喜欢显示一个图像，并且当鼠标悬停在图像上时，将其更改为其他图像，并且文本显示在图像的右侧。我正在尝试构建功能，但它会不断扭曲菜单。 :( 请提供任何帮助。

<style>
  .mySidenav a {
      position: absolute;
      left: -80px;
      transition: 0.3s;
      padding: 15px;
      width: 100px;
      text-decoration: none;
      font-size: 20px;
      color: black;
  }
  .body{
      background-color: gray;
  }

  .mySidenav a:hover {
      left: 0;
  }

  .about {
      top: 10px;
      background-color: #fff;
  }

  .blog {
      top: 65px;
      background-color: #fff;
  }

  .myContent {
      margin-left:150px;
  }

  .myButtonLink {
      display: block;
      width: 100px;
      height: 100px;
      background: url('https://kyleschaeffer.com/wp-content/uploads/2009/01/buttonleafhover.png') bottom;
      text-indent: -99999px;
  }

  .myButtonLink:hover {
      background-position: 0 0;
  }
</style>
<body class="body">

<div class="mySidenav sidenav">
  <a href="#" class="about">About</a>
  <a href="#" class="blog">Blog</a>
</div>

<div class="myContent">
  <p>This is the image that should be in the menu</p>
    <a class="myButtonLink" href="#LinkURL">Leaf</a>
</div>

</body>

在图像和文本上方将鼠标右对齐

0 个答案: