纯HTML / CSS - Working CodePen

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 （我更改了您的课程以便于理解）

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

但是，有很多方法可以实现这一目标。祝你好运！

远程链接图像和文本

1 个答案:

纯HTML / CSS - Working CodePen