amir jafari
2 سال پیش
توسط amir jafari
مطرح شد
هاور روی عنصر
سلام
قصد دارم وقتی روی یک عنصر ماوس هاور شد کلمه بستن به وسط هدایت بشه و وقتی خارج شد به سمت چپ و opacity 0px و display none
اما نمیدونم چطوری با css وقتی ماوس از هاور خارج شد به سمت چپ هدایت کنم
کدهام :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<style>
body{
font-family: peyda;
background-color: #FF8E00;
}
.off{
width: 40%;
height: 30%;
position: absolute;
left: 30%;
right: 30%;
background-color: #FFFFFF;
text-align: center;
}
.off:hover .sabk{
display: none;
transition: 1s all;
}
.bastan{
display: none;
left: 0px;
position: absolute;
}
.off:hover .bastan{
transition: 1s all;
left: 50%;
display: block;
animation-name: test1;
animation-duration: 1s;
}
@keyframes test1{
0%{
left: 0px;
opacity: 0px;
}
100%{
left: 50%;
opacity: 100%;
}
}
</style>
<body>
<div class="off">
<div class="sabk">سبک</div>
<div class="bastan">بستن</div>
</div>
</body>
</html>
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
ثبت پرسش جدید
![user-avatar]()
![user-avatar]()
Banana Life
@shift.delete
2 سال پیش
مطرح شد
گزارش تخلف
کپی کردن
1
سلام
دوست عزیز کد تون را تصحیح کردم .
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<style>
body {
font-family: peyda;
background-color: #FF8E00;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.off {
width: 40%;
height: 30%;
display: flex;
justify-content: center;
align-items: center;
background-color: #FFFFFF;
}
.sabk {
position: absolute;
opacity: 1;
transition: 3s all;
}
.off:hover .sabk {
opacity: 0;
transition: 1s all;
}
.bastan {
transition: 1s all;
position: absolute;
transform: translateX(-370px);
opacity: 0;
}
.off:hover .bastan {
transition: 1s all;
transform: translateX(0);
opacity: 1;
}
</style>
<body>
<div class="off">
<div class="sabk">سبک</div>
<div class="bastan">بستن</div>
</div>
</body>
</html>
amir jafari
@sharkbeat
2 سال پیش
مطرح شد
گزارش تخلف
کپی کردن
0