将鼠标悬停在图像上，图像的不透明度和图像下方标题的颜色会发生变化..同样，当标题变成两行时，它会破坏格式

hover on an image, the image opacity and color of title below the image changes...also when the title becomes two line, it ruins the format

本文关键字：图像 标题 同样 两行 格式 变化 颜色 不透明度 悬停 鼠标 方标题      更新时间：2024-02-11

我当前有一个图像和该图像下方的标题。当我把鼠标悬停在图像上时，我想改变文本的颜色。我希望图像的不透明度也能改变。当我将鼠标悬停在标题上时，我希望将文本的颜色更改为悬停在图像上时使用的颜色。为了澄清，我正试图把它变成这样；http://www.viralnova.com/science/

我有一个类似的代码

<div class="row">
<article>
  {% for news in newsInCat %}
  <div class='col-sm-4'>
    <div class="content">
    <figure class="story-image">
      <a href='{{news.get_absolute_url }}'><img src="{{news.get_image_url}}"  class="img-rounded" alt="Cinque Terre" width="360" height="267"></a>
    </figure>
      <div id="forever "style="margin-bottom:30px;">
      <a href='{{news.get_absolute_url }}' style="text-decoration:none; color:#282E5C;"><center><h4 style="font-size: 18px;
    font-weight: 400;">{{news.title}}</h4></center></a>
  </div>
        </div>
  </div>
  {% endfor %}
</article>
</div>

我应该如何实现我的要求？

当标题变成两行时。。。帖子变得像这个

AAA AAA AAA
... AAA AAA
AAA

请参阅此示例

* {
  margin: 0;
}
a {
  text-decoration: none;
  color: #282E5C;
}
.content{
  width:360px;
}
.content:hover a {
  color: red;
}
.content:hover img {
  opacity: .8;
}
<div class="content">
  <figure class="story-image">
    <a href='{{news.get_absolute_url }}'><img src="http://media.galaxant.com/000/459/563/340x252-1459957623.png" class="img-rounded" alt="Cinque Terre" width="360" height="267"></a>
  </figure>
  <div id="forever " style="margin-bottom:30px;">
    <h4 style="font-size: 18px;
              font-weight: 400;"><a href='{{news.get_absolute_url }}'>{{news.title}}</a></h4>
  </div>
</div>

给你的图像一个类名，假设man，然后在css中给.man:hover一个带值的不透明度，然后给title一个类名。假设shi，然后在css中给.man:hover .shi一个你想要的颜色

.man:hover{
opacity: 0.5;
}
.man:hover .shi{
color: #2222;
}

这是一个简单的图像不透明度。当你说不透明：1你的不透明是100%，但当你说0.8时，它是80%，这是你从网站提供的效果，所以你的css应该看起来像这样：

    .img-rounded {
        opacity:0.8;
        }
      a:hover {
            color:blue;
            }
       h4:hover{
        color:red
}

我建议您使用jQuery。它易于实现和理解。

在标题元素中添加一个类，如下所示：

<div class="row">
<article>
{% for news in newsInCat %}
<div class='col-sm-4'>
<div class="content">
<figure class="story-image">
  <a href='{{news.get_absolute_url }}'><img src="{{news.get_image_url}}"  class="img-rounded" alt="Cinque Terre" width="360" height="267"></a>
</figure>
  <div id="forever "style="margin-bottom:30px;">
  <a class='box-title' href='{{news.get_absolute_url }}' style="text-decoration:none; color:#282E5C;"><center><h4 style="font-size: 18px;
font-weight: 400;">{{news.title}}</h4></center></a>
</div>
</div>
</div>{% endfor %}
</article>
</div>

现在使用这个代码

$(document).ready(function(){
    $(".img-rounded").hover(function(){
      $(this).css("opacity",1);
      $(".box-title").css("color","red");
    });
    $(".box-title").hover(function(){
      $(this).css("color","red");
    });
});

和CSS：

.img-rounded{ opacity:0.8; }
.box-title{ color:black; }

不要忘记添加jQuery脚本

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
相关文章：