Question

需要在img上添加边框颜色，并在悬停时添加相同的颜色。

谢谢！

Answer 1

我们走了：

＆＃13;

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; 
}

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;
＆＃13;
img:hover { border: thick red solid; } img:hover + figcaption { color: red; }
＆＃13;
<figure> <img src="http://placehold.it/350x150" /> <figcaption>Caption goes here</figcaption> </figure>
＆＃13;
＆＃13;
＆＃13;

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

＆＃13;
＆＃13;
img:hover { border: thick solid green; } a:hover + h5 a { color: green; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 3

这可能就是你所需要的，你可能需要向下滚动一下才能看到文字。

＆＃13;

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;
  
}

＆＃13;

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

＆＃13;

Answer 4

试试这个：

＆＃13;

.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;

}

＆＃13;

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

＆＃13;

HTML同时悬停img和文本

4 个答案: