html - 远程链接图像和文本

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 - Working CodePen

HTML(我更改了您的类(class)以使其更易于理解)

<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")
})

虽然有很多方法可以实现这一点。祝你好运!