Html 将此CSS动画悬停在整个列上

我正在尝试定制 支持并非真正有用。我无法发布图片，所以我将这些链接替换为“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 &amp; Media                   </a>
                </h5>
                    <p>
            Explore film, journalism, photography or theatre, music. Learn from the experts
 in creative arts and media...      </p>
                    </div>

        </div>

但是如何确保带有链接的图像不会悬停两次（使用columhover和img hover）

此外，我还找到了下划线的代码，但我不确定当鼠标悬停在整个柱上时，或者当您放置光标或图像时，如何显示下划线：

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

---

在您的实际代码中，没有任何东西会悬停两次，只有两种不同的悬停效果

你的列悬停将被激活，只要你在该列的区域，所以它将始终处于启用状态，如果你想停用它，你必须用另一个悬停将其置零

示例代码：

.col-md-4{
/*背景色仅用于显示框的区域*/
背景颜色：黄色；
}
.col-md-4：悬停a{
/*如果光标位于.col-md-4类中，则链接标记将为红色*/
背景色：红色；
}
.col-md-4 a:悬停{
/*如果光标位于链接标记上，则链接标记将恢复正常/无效*/
背景色：透明；
}

探索电影、新闻、摄影或戏剧、音乐。向专家学习
在创意艺术和媒体

好的，我在另一个论坛上收到了这个答案，它运行得很好，我认为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;
}

---

After是伪元素而不是伪选择器，您需要使用：：After谢谢。我的意思是，默认情况下，当有链接时，主题会有图像悬停，因此如果我将光标放在它悬停的列上，然后移动到img，它会再次悬停。但对我来说，最重要的是在光标悬停时显示下划线。我试过这个代码，但没用。。出于某种原因，它会使下划线完全消失。对于下划线，您还可以在元素上使用文本装饰：下划线，该元素应具有下划线（.col-md-4:hover h5 a{text装饰：underline；}我又看了一遍，它无法工作，因为我复制了您提供的代码，有两件事我们需要解决：将a:after的宽度设置为100%或删除它。您需要给出标题（h2、h3、h4、h5）“position:relative；”嘿，哥们，很抱歉回答晚了。昨天网站关闭了，我无法尝试。我今天尝试了，虽然在a:after中加入了100%，但仍然没有成功，但我在其他论坛上收到了与你所说的几乎相同的答案，加了几行额外的话，产生了不同。

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

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