Question

我有以下具有左右导航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>

Answer 1

首先，您已将#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>

将鼠标悬停在div上以增加宽度并显示更多内容

1 个答案: