0

我正在使用 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;”。

我花了大约一周的时间试图解决这个问题，但我被困住了！不知道这个能不能实现？

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

4

1 回答 1

0

除非应用它们的元素也具有位置集，否则诸如 etc. 之类的定位值top: XXpx不起作用position: relative，因此也许尝试将其添加进去。我不太了解您正在使用的示例，但这可能就是全部你需要让它工作。

PS：欢迎来到 Stack Overflow。:-)

编辑：针对下面的评论，我现在明白问题与覆盖样式表声明的内联样式有关，是的，内联样式在级联法则中比样式表规则更重要。

但是，有一种方法可以覆盖内联样式，使用!important:

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

因此，您将 !important 放在规则之后但分号之前。（还要注意上面的这段时间.。.post-caption-container你把它漏掉了，但是没有它，声明无论如何都不会起作用。

于 2013-05-27T15:05:01.620 回答