Question

我正在使用php，html和css创建一个标题，首先显示标题然后再滑动以显示悬停的摘录。

基本帖子设置的示例结构（为简洁起见而简化）：

<div class="post-container">
    <a href="post-link.html"><img src="postThumbnail.jpg" /></a>
    <span class="post-caption-container">
        title
        this is the excerpt
    </span>
</div>

CSS文件

.post-container{
    position: absolute;
    height: 200px; 
    width: 300px;
    overflow: hidden;
}

.post-caption-container{
    width: 300px;
    height: 80px; 
    top: -45px; 
}

.post-container:hover .post-caption-container{
    top: 0px;
    -webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out; 
}

内联HTML以覆盖样式

<div id="post-container" style="height: 140px;">
    <a href="post-link.html"><img src="postThumbnail.jpg" /></a>
    <span class="post-caption-container" style="height: 50px; top: -25px; ">
        title
        this is the excerpt
    </span>
</div>

“style = top：-25px;”的部分造成了问题。

我最好的猜测是内联html样式“style = top：-25px;”是覆盖“.post-caption-container”和“.post-container：hover .post-caption-container”中的值，这不是我想要的。

我需要“.post-container：hover .post-caption-container”值保持“top：0px;”。

我花了大约一个星期试图解决这个问题，但我被卡住了！我不知道这是不可能实现的？

任何帮助将不胜感激。如果这个问题不可能，也许是另一种方法来实现相同的结果，也会喜欢一些不同的想法！ oi vey，非常感谢！

Answer 1

top: XXpx之类的定位值不起作用，除非它们应用的元素也有一个位置集，例如position: relative，所以也许尝试添加它。我不太喜欢了解您正在使用的示例，但这可能是您需要的所有工作。

PS：欢迎使用Stack Overflow。： - ）

编辑：在回复下面的评论时，我现在明白这个问题与内联样式覆盖样式表声明有关，是的，内联样式在级联定律中更加重视样式表规则。

但是，有一种方法可以使用!important:

覆盖内联样式

.post-container:hover .post-caption-container{
    top: 0px !important;
}

所以，你在规则之后但在分号之前放置！重要。（另请注意上面.之前的句号.post-caption-container。你把它遗漏了，但没有它，声明无论如何都不会有效。

通过html设置css值？

1 个答案: