HTML同时悬停img和文本答案

【问题标题】：HTML Hover img and text at the same timeHTML同时悬停img和文本
【发布时间】：2017-04-29 04:42:20
【问题描述】：

需要在img上加上边框颜色，和on hover下的文字颜色一致。

谢谢！

【问题讨论】：

请分享一些代码
向我们展示您的尝试很重要，这样我们才能分析您的代码并帮助您。
imgur.com/tAEenKO 鼠标悬停时类似这样的东西。鼠标悬停时为灰色，img 边框为红色，鼠标悬停时为文本颜色
a.jpg" / >
a/">Letters</a></h5>

跨度>

【解决方案1】：

使用+ 选择器选择一个元素在具有:hover 伪类的元素之后：

img:hover {
    border: thick red solid;
}

img:hover + figcaption {
    color: red;
}

<figure>
  <img src="http://placehold.it/350x150" />
  <figcaption>Caption goes here</figcaption>
</figure>

同样的事情，但 HTML 结构和你的一样：

img:hover {
    border: thick solid green;
}

a:hover + h5 a {
    color: green;
}

<div class="prod">
  <a href="http://">
     <img class="size-full wp-image-682 aligncenter" src="http://placehold.it/350x150" />
  </a>
  <h5 style="text-align: center; margin-top: 15px; text-transform: uppercase; color: #727176;">
    <a href="a/">Letters</a>
  </h5>
</div>

【讨论】：

【解决方案2】：

这可能是您需要的，您可能需要向下滚动一下才能看到文本。

body{
  height: 300px;
}
.text{
  color: lightgreen;
  display: none;
 
}
img{
  height: 200px;
  width: 200px;
  display: block;
}
img:hover{
  border: 3px solid lightgreen;
}

img:hover ~ .text{
  display: unset;
  display: block;
   padding-top: 40px;
  
}

<body>
  <img src="https://s2.postimg.org/kdwhe6pqh/dude_relaxing_simplistic_1280x800_wallpaper_www.jpg" alt="">
  <h3 class="text">An Image</h3>
</body>

【讨论】：

【解决方案3】：

我们开始吧：

div.prod {
  max-width: 100px;
  max-height: 100px;
  text-align: center;
  padding:20px;
}

div.prod img {
  width: 100%;
  height: auto;
}

div.prod img:hover {
  border: 2px solid red;
  margin:-2px;
}

div.prod a:hover + h5 a {
  color: red; 
}

&lt;div class="prod"&gt; &lt;a href="http://"&gt;&lt;img class="size-full wp-image-682 aligncenter" src="https://placeholdit.imgix.net/~text?txtsize=33&amp;txt=350%C3%97150&amp;w=350&amp;h=150"; /&gt;&lt;/a&gt; &lt;h5 style="text-align: center; margin-top: 15px; text-transform: uppercase; color: #727176;"&gt;&lt;a href="a/"&gt;Letters&lt;/a&gt;&lt;/h5&gt;; &lt;/div&gt;

【讨论】：

谢谢！！但是..如果我只需要在他们浏览图像或文本时为图像和文本着色？因为在示例中，当鼠标经过 div 时悬停被激活，并且在角落中没有 href，只有在文本和图像中。谢谢悟空：D
所以边框和文本颜色也应该不用鼠标通过？
嗯，对不起我的英语不好。链接在 img 和 h5 上，但是当光标触摸 div 并且在 h5 的角落没有链接时悬停处于活动状态。因为仅在 img 和 h5 标签中
不错，但是当我将鼠标悬停在文本上时，img 的颜色不会改变.. 没关系，非常感谢你，如果你想不出别的，我会把你当作最佳答案

【解决方案4】：

试试这个：

.prod {

       text-align: center;
}

h5   {
      
      color: #727176;

      text-transform: uppercase;

      margin-top: 15px;
}

a    {

     text-decoration: none;

}

a img {

      border: 3px solid transparent;

}

a:hover img , a:hover + h5 a {

         border : 3px solid red;

}

<div class="prod">

  <a href="#" class="x">

     <img class="size-full wp-image-682 aligncenter" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSEYXFYtEKaqcM2_n4o1ppeWTJhzXjhIaooK76ArmSOkl_r1oE2nQCB-12J">

 </a>

  <h5>

      <a href="#">Letters</a>

  </h5>

</div>

【讨论】：