CSS: после перехода на пари
-
26-10-2019 - |
Вопрос
Структура HTML
<div id="small_gal">
<div><img src="images1.jpg" /></div>
<div><img src="images1.jpg" /></div>
<div><img src="images1.jpg" /></div>
<div><img src="images1.jpg" /></div>
<div><img src="images1.jpg" /></div>
<div><img src="images1.jpg" /></div>
<div><img src="images1.jpg" /></div>
<div><img src="images1.jpg" /></div>
</div>
Изображения имеют капельницы, так что border
не является решением, так как это будет за пределами изображения
Граница имеет переход, и она работает гладко на FF, но не в Chrome или других браузерах
Вот код, который я использовал
#small_gal div:hover{cursor: pointer;}
#small_gal div:after {
content: '';
position: absolute;
width: 112px;
height: 81px;
border: 3px solid #e27501;
left: 9px; top: 9px;
z-index: 9;
opacity: 0;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
#small_gal div:hover:after {
opacity: 1;
}
Примечание:
#small_gal
это только контейнер, каждый изображение обернут в DIV, поэтому мы можем реализовать: после
Решение
Firefox 4+ является единственным браузером, который поддерживает переход псевдо-элементов, таких как :before
а также :after
.
Источник: http://css-tricks.com/13555-transitions-and-animations-on-css-generated-content/
Другие советы
Переходы CSS по-прежнему экспериментальны в Webkit, поэтому, вероятно, вы попали в некоторую ошибку с краем, включающую :: после псевдо-селектора. Я предлагаю вообще избегать этого и просто переходить border-color
вместо. Это хорошо сработало в Chrome и Safari:
#small_gal div.p {
border: 2px solid transparent;
-webkit-transition: border-color 1s ease-in;
}
#small_gal div.p:hover {
border-color: orange;
}
Вы можете использовать CSS -переходы на псевдо -элементах, таких как: до и: после того, если вы можете определить свойство на самом элементе и использовать inherit
В псевдо -элементе. Таким образом, в вашем случае вместо того, чтобы переходить на opacity
, вы можете положить переход на border-color
.
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#small_gal div {
border-color: transparent;
cursor: pointer;
display: inline-block;
position: relative;
-webkit-transition: border-color 0.5s ease-in-out;
-moz-transition: border-color 0.5s ease-in-out;
-o-transition: border-color 0.5s ease-in-out;
-ms-transition: border-color 0.5s ease-in-out;
transition: border-color 0.5s ease-in-out;
}
#small_gal div:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-color: inherit;
border-style: solid;
border-width: 3px;
left: 0;
top: 0;
}
#small_gal div:hover {
border-color: #e27501;
}
#small_gal div img {
display: block;
height: auto;
max-width: 150px;
width: auto;
}
<div id="small_gal">
<div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div>
<div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div>
<div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div>
<div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div>
<div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div>
</div>