стилизованное название сохранить нажатие эскизов

72
10

Я работаю над стилем блога бутстрапа, поэтому у меня есть три эскиза в каждой строке. thumbnail содержит изображение, h3 текст и текст p (описание)

<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="xxx" alt="xxx">
<div class="caption">
<p class="text-muted"> <i style="font-size:1.2em;" class="glyphicon glyphicon-pencil"> </i> xxx <i style="font-size:1.2em;" class="glyphicon glyphicon-time"></i> xxx</p>
<h3><a title="xxx" href="http://localhost/blog/Article.php?id=xxx">xxx</a></h3>
<p>xxx</p>
<a href="http://localhost/blog/Article.php?id=xxx" class="btn btn-primary btn-sm">إقرأ المزيد →</a>
<a href="#" class="btn btn-default btn-sm disabled">شاهده xxx</a>
</div>
</div>

xxx - это код php

и мой код кода css

<h3><a title="xxx" href="http://localhost/blog/Article.php?id=xxx">xxx</a></h3>

является

    a:hover {
position: relative;
}

a[title]:hover:after {
content: attr(title);
padding: 4px 8px;
color: #333;
position: relative;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

поэтому без зависания ссылки (до):

http://www8.0zz0.com/2015/06/26/02/852135296.png

и после наведения заголовка h3, серый квадрат показал успешно, но он подтолкнул нижние миниатюры... Я пытаюсь исправить это с позиции: абсолютный до миниатюры, но не работает (после):

http://www11.0zz0.com/2015/06/26/02/599780954.png

спросил(а) 2015-06-26T02:36:00+03:00 4 года, 8 месяцев назад
1
Решение
80

Мое предположение :after должно быть position: absolute которое выбрасывает его из стека элементов.

ответил(а) 2015-06-26T03:33:00+03:00 4 года, 8 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема