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

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

谢谢!

【问题讨论】:

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

标签: html css image hover


【解决方案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> 

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2022-10-30
        • 1970-01-01
        • 1970-01-01
        • 2017-11-09
        • 2012-06-10
        • 2016-08-07
        • 1970-01-01
        相关资源
        最近更新 更多