将此CSS动画悬停在整列上
将此CSS动画悬停在整列上
提问于 2018-06-12 05:13:46
我正在尝试定制this template支持并没有真正的用处。我不能发布图片，所以我把这些链接换成了"xxx“
在课程类别部分有一些栏目。
<div class="col-xs-12 col-md-4 teaser_border teaser_border_column_11">
<div class="teaser text-center h5">
<div class="teaser_image">
<img src="xxx">
</div>
<h5>
<a href="rainbow-colleges/course-category/creative-arts/">
Creative ARts & Media </a>
</h5>
<p>
Explore film, journalism, photography or theatre, music. Learn from the experts
in creative arts and media... </p>
</div>
</div>因此，假设我想让整个列在光标打开时悬停，我还想在img上放置一个链接。它也在徘徊
HTML
<div class="col-xs-12 col-md-4 teaser_border teaser_border_column_11">
<div class="teaser text-center h5">
<div class="teaser_image"><a href="http://rainbow-colleges/course-category/creative-arts/">
<img src="xxx">
</div>
<h5>
<a href="http://rainbow-colleges/course-category/creative-arts/">
Creative ARts & Media </a>
</h5>
<p>
Explore film, journalism, photography or theatre, music. Learn
from the experts
in creative arts and media... </p>
</div>
</div>CSS：
.col-md-4:hover {
opacity:0.7;
}
.col-md-4:hover a {
color:#34c663;
transition:0,000002s;
}但我如何确保带有链接的图像不会悬停两次(使用colum悬停和img悬停)
我还找到了下划线的代码，但我不知道如何将它放在鼠标悬停在整个列上时，或者当你将光标或图像放在上面时：
.teaser h2 a:after, .teaser h3 a:after, .teaser h4 a:after, .teaser h5 a:after {
background-color: #34c663;
content: '';
margin: 0 auto;
position: absolute;
bottom: -5px;
left: 0;
right: 0;
height: 2px;
text-align: center;
transition: width .3s;
width: 0;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-14 10:45:56
好的，我在另一个论坛上收到了这个答案，它工作得很好，我认为webkit过渡的部分是缺少的，因为使用这个代码它是有效的。
.col-md-4 a:hover .teaser_image,
.col-md-4 a:hover p {
opacity: .7;
}
.col-md-4:hover h5{
color: #34c663;
text-decoration: none;
-webkit-transition: all 0.15s linear 0s;
transition: all 0.15s linear 0s;
}
.col-md-4 h5:after{
background-color: #34c663;
bottom: -5px;
content: "";
height: 2px;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
text-align: center;
-webkit-transition: width 0.3s;
transition: width 0.3s;
width: 0;
}
.col-md-4:hover h5:after {
width: 50px;
}Stack Overflow用户
发布于 2018-06-12 05:45:45
在你的实际代码中，没有任何东西会悬停两次，只有两种不同的悬停效果。
只要你在列的区域，你的列悬停就会被激活，所以它总是打开的，如果你想停用它，你必须用另一个悬停来使它无效...
示例代码：
.col-md-4{
/* The background-color just to show you the area of the box */
background-color: yellow;
}
.col-md-4:hover a{
/* Your link tag will be red if your cursor is in the .col-md-4 class */
background-color: red;
}
.col-md-4 a:hover{
/* Your link tag will get back to normal/nullified if your cursor is on a link tag */
background-color: transparent;
}<div class="col-xs-12 col-md-4 teaser_border teaser_border_column_11">
<div class="teaser text-center h5">
<div class="teaser_image">
<img src="xxx">
</div>
<h5>
<a href="rainbow-colleges/course-category/creative-arts/">
Creative ARts & Media </a>
</h5>
<p>
Explore film, journalism, photography or theatre, music. Learn from the experts
in creative arts and media... </p>
</div>
</div>
这是当光标位于列中时显示悬停效果(下划线)的方式：
.col-md-4:hover .teaser h2 a:after,
.col-md-4:hover .teaser h3 a:after,
.col-md-4:hover .teaser h4 a:after,
.col-md-4:hover .teaser h5 a:after {
background-color: #34c663;
content: '';
margin: 0 auto;
position: absolute;
bottom: -5px;
left: 0;
right: 0;
height: 2px;
text-align: center;
transition: width .3s;
width: 0;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50806127
复制相关文章
相似问题