Question

我遇到了这个问题，当我将鼠标悬停在视频元素上时，我失去了css（边界半径正在改变）。 Tts在视频行上。你们有谁知道我能做些什么来解决它？您可以看到我当前的网站here

.gallery-image {
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

<div class="large-3 columns">
    <div class="building-block-item">
        <div>
            <a href="https://www.youtube.com/embed/o7rdAH8oifo?fs=1&amp;autoplay=1&amp;rel=0. " class="gallery-video" data-featherlight="" data-featherlight-type="iframe">
                <div class="gallery-image">
                    <div class="gallery-veil">
                        <h3>Høreprøve</h3>
                    </div>
                    <img src="assets/images/video/video.png?anchor=center&amp;mode=crop&amp;width=282&amp;height=190&amp;rnd=130965782700000000&amp;quality=90">
                 </div>
             </a>
         </div>
     </div>
</div>

Answer 1

更新由于transition因此请删除.gallery-image img

的转换

我检查了代码并通过删除溢出找到你的div将走出边界（几个px）所以删除转换是更好的方法。你的课将如下所示：

.gallery-image img
{
    width: 100% !important;
    max-width: 100% !important;
}

Answer 2

我认为确切的解决方案是减少或删除img标签中的css过渡效果。

使用

.gallery-image img {
    width: 100%!important;
    max-width: none;
}

代替

.gallery-image img {
    width: 100%!important;
    max-width: none;
    transition: .4s;
}

Answer 3

您已在css中应用过渡效果

/book/search/?author_id=1

将其更改为以下

.gallery-image img {
width: 100%!important;
max-width: none;
transition: .4s ;
}

它将解决问题

当悬停时，Css会消失

3 个答案: