Настройка значений css через html?

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: Добро пожаловать в переполнение стека. :-)

EDIT: В ответ на комментарии ниже я теперь понимаю, что проблема связана с встроенным стилем, переопределяющим объявления стилей, и да, встроенные стили несут больше веса правил правил стилей в законах каскада.

Однако, есть один способ переопределить встроенный стиль, используя !important:

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

Итак, вы размещаете! Важно после того, как правило, но перед точкой с запятой. (Обратите внимание также на период . до .post-caption-container. Вы оставили его, но без него декларация не будет работать.