Question

我希望只有当我将鼠标悬停在段落内的链接上时才能显示辅助框，我可以在只使用CSS的情况下执行此操作（如果是这样的话）？或者我必须熟悉JS。

.wrapper {
  height: 100%;
}

.primary-box {
  background-color: #ffff99;
  margin: auto;
  width: 400px;
  height: 300px;
  border: dotted 2px #b2b26b;
  border-radius: 20px;
  text-align: center;
}

.secondary-box {
  display: none;
  background-color: #ffff99;
  margin: auto;
  width: 200px;
  height: 120px;
  border: dotted 2px #b2b26b;
  border-radius: 20px;
  text-align: center;
}

.primary-box p {
  font-size: 1em;
  line-height: 1.3;
  text-align: justify;
  padding-right: 10px;
  padding-left: 10px;
}

.main-text:hover ~ .secondary-box {
    display: inline-block;
}

Answer 1

您的问题是div元素不应该是p元素的子元素。

<div class="primary-box">
  <h2>Heading</h2>
  <div class="main-text">
    Here is some text. The box only appears when hovering over <a href="#">this link</a>
    <div class="secondary-box">
      <p>This is text inside a box</p>
    </div>
  </div>
</div>

如果您修改HTML并将p元素与类.main-text更改为div元素，则可以使用以下选择器：

Updated Example

.main-text a:hover ~ .secondary-box {
    display: inline-block;
}

这是有效的，因为a元素和.secondary-box元素是兄弟姐妹。

如果您希望框在鼠标悬停在其上时保持可见，请添加另一个选择器：

Updated Example

.main-text a:hover ~ .secondary-box,
.secondary-box:hover {
    display: inline-block;
}

将鼠标悬停在段落内的链接上时显示DIV

1 个答案: