<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
我目前有一张图片和图片下方的标题。我想要实现的是，当我将鼠标悬停在图像上时，我希望更改文本的颜色。我也想改变图像的不透明度。 当我将鼠标悬停在标题上时，我希望将该文本的颜色更改为我将鼠标悬停在图像上时使用的相同颜色。 澄清一下，我正在尝试这样做； 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>关于javascript - 将鼠标悬停在图像上，图像下方的图像不透明度和标题颜色发生变化......当标题变成两行时，它会破坏格式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36474390/
相关文章：
javascript - jstree 图标以及如何 'click to expand'
PHP - cURL 发布到网站 -> 模拟浏览器(执行 javascript) -> 返回 html 结果
jQuery UI 自动完成 - 输入与结果集不匹配时不显示结果
javascript - 如何在不使用ajax提交表单的情况下将文本值发送到服务器
html - 如何创建一个充满移动 'nodes'并响应鼠标移动的网站背景？
javascript - site.webmanifest 文件的主要用途是什么？