У меня есть изображение с 40Px 40Px, когда курсор наводится на изображение, тогда изображение должно быть 100px 100px с, но чтобы открыть медленное левое верхнее или нижнее правое или правое верхнее внизу слева. Когда я переместил курсор на изображение обратно в исходное положение точно 40px 40px. Заранее спасибоjavascript hover image and show left top to bottom right
Вы также можете сделать это, не используя CSS3 вместо javascript.
.image-placeholder {
width: 40px;
height: 40px;
background: red;
transition: height 2s, width 2s;
}
.image-placeholder:hover {
width: 100px;
height: 100px;
}
.images {
list-style: none;
padding: 0px;
}
.images li {
display: inline-block;
vertical-align: middle;
}<div class="image-placeholder">
<!-- You could also use the class on image tags -->
</div>
<!-- second example -->
<ul class="images">
<li class="image-placeholder"></li>
<li class="image-placeholder"></li>
<li class="image-placeholder"></li>
</ul>ok Я понимаю, но как вы наверху справа внизу слева с javascript или jquery.Когда я сделал класс, например: $ (". Amazon"). Hover (function() { $ (". Amazon a img") .toggleClass ("amazon_hover"); УС: .amazon_hover { позицию: абсолютная; ширина: 100px; высота: 100px; -moz-переход: высота 2s, ширина 2s; г-индекс: 10; } – Marko
@Marko Я не понимаю, почему вы должны сделать это с помощью JQuery. Я добавил второй пример с использованием 'vertical-align: middle'. Вы можете добавить свои собственные варианты с помощью CSS. – Berendschot
Насколько я понимаю, неважно, css или javascript jquery важна для меня, что мы можем открывать изображение по диагонали медленно сверху lef t до нижнего правого. заранее спасибо – Marko
Вы можете использовать переход CSS:
img {
width: 40px;
height: 40px;
transition: all 2s;
}
img:hover {
width: 100px;
height: 100px;
}
И конечно JSFiddle Demo
Пожалуйста, ознакомьтесь с Правилами форума о том, как опубликовать правильные вопросы. Вы найдете это прямо на экране, когда будете составлять свой вопрос. –