远程链接图像和文本

Question

我对此做了几天的研究，但遇到了任何与我想要做的完全相符的解决方案。我觉得我想要的东西应该很容易用HTML和CSS来完成，但却遇到了困难。

我最初希望在点击图片时出现文本，将所有其他内容推开。这看起来太复杂了，需要一些奇怪的定位技巧，或者页面上的文本空间是空的，直到它出现(不是我想要的)。大多数解决方案都指向javascript，但我希望使用纯HTML和CSS。

我已经放弃了，所以我现在只是想这样做：

• 悬停(但触摸友好)在图像上，并使该文本突出显示或程式化。

HTML：

<div class="left-photos">
    <a href="diane">
    <img id="diane-photo" src="diane.jpg" alt="diane profile photo" /></a>
</div>

<div class="us-profile-text">
    <h4>Diane Adamec - Board President</h4>
    <p>TEXT HERE TEXT HERE TEXT HERE</p>
</div>

CSS：

.left-photos {
        width: 143px;
        float: left;
        margin-right: 10px;

    }

.us-profile-text p {
        padding: 0 5px 10px 5px;
        margin: 0;
    }

.us-profile-text {
    position: relative;
    font-size: .8em;
{

a:hover img {
        border: 5px solid #ff0000;
    }

我真的很感激你的帮助！

Answer 1

正确地说，您可以只使用CSS，但是您需要确保隐藏的内容嵌套在父div中。否则，您将需要使用jQuery，这仍然没有那么糟糕。

纯HTML/CSS - 工作CodePen

(我更改了您的类以使其更容易理解)

<div class="outer">
    <img id="diane-photo" src="http://animalia-life.com/data_images/dog/dog5.jpg" alt="diane profile photo" />
  <div class="lower"> <!-- NOTE THAT THIS DIV IS NESTED -->
      <h4>Diane Adamec - Board President</h4>
      <p>TEXT HERE TEXT HERE TEXT HERE</p>
  </div>
</div>

CSS

.outer {
  height:400px;
  width:100%;
}
.outer img {
  width:100%;
  height:auto;
}
.lower {
  display:none;
}
.outer:hover .lower {
  display:block;
}

您提到了这一点，但是hover状态无法在移动上解决您的问题。如果您想使用单击事件，最好使用jQuery，它可能如下所示：

$(".outer").click(function() {
  $(".lower").css("display", "block")
})

不过，要做到这一点，有很多方法。祝好运!