我有以下具有左右导航div的HTML代码。当我将鼠标悬停时,我可以扩大div的宽度。我无法在div中显示任何内容。

我正在尝试实现msn.com sample html interface I am trying to build之类的东西

我想进行左右导航,以允许用户查看下一页和上一页。当用户将鼠标悬停在链接上时,我希望用户看到图像。



div.a {
  width: 100px;
  height: 100px;
  -webkit-transition: width 2s;
  /* For Safari 3.1 to 6.0 */
  border: thin black solid;
  transition: width 2s;
}

div.a:hover {
  width: 300px;
  border: thin black solid;
}

div.span:hover {
  display: block;
}

#hover-content {
  display: none;
}

<!DOCTYPE html>
<html>
<head></head>
<body>
  <div style='padding-bottom: 1000px'>
    <h1>The transition Property</h1>
    <h1>The transition Property</h1>
    <h1>The transition Property</h1>
    <h1>The transition Property</h1>

    <div style='position: fixed; width: 100%; left: 0px; top: 290px;'>
      <div style='float:left;'>
        <div class='a'>&gt;</div>
          <span id="hover-content">This is what i see</span>
        </div>

      <div style='float: right;'>
        <div class='a'>&lt;</div>
      </div>
    </div>

  </div>
</body>
</html>

最佳答案

首先,您已将#hover-content设置为display: none;,因此它将不可见。

您需要使用类似以下命令使其在悬停时可见:

.nav:hover .hover-content {
  display: block;
}


有关完整示例,请参见下面的代码段。
注意,我清理了它并使用了类而不是内联css。



.wrapper {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
}

.nav {
  width: 100px;
  height: 100px;
  border: thin black solid;  -webkit-transition: width 2s;
  /* For Safari 3.1 to 6.0 */
  transition: width 2s;
}

.nav-left {
  float: left;
}

.nav-right {
  float: right;
}

.nav:hover {
  width: 300px;
}

.hover-content {
  display: none;
}

.nav:hover .hover-content {
  display: block;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div>
    <h1>The transition Property</h1>

    <div class='wrapper'>
      <div class='nav nav-left'>
        <div class='a'>&gt;</div>
        <span class='hover-content'>
            This is what i see
        </span>
      </div>
      <div class='nav nav-right'>
        <div class='a'>&lt;</div>
      </div>
    </div>

  </div>
</body>

</html>

关于html - 将鼠标悬停在div上以增加宽度并显示更多内容,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52027953/

10-12 14:23
查看更多