تغییر ارتفاع DIV به طور اتوماتیک [بایگانی]

sarasara

چهارشنبه 28 مرداد 1394, 09:37 صبح

سلام
سوال من اینه که آیا می شه ارتفاع یه DIV وقتی که mouseover می شه رو فقط با CSS تغییر داد بدون استفاده از JavaScript؟
من می دونم که چون یه Event رخ داده باید با JavaScript این کار رو کرد و نحوه انجامش رو هم بلدم. اما امروز یکی بهم گفت می شه فقط با CSS و بدون JavaScript یا jQuery این کار رو کرد!!
فقط می خوام بدونم شدنیه یا ایشون اطلاعاتشون درست نبوده؟
ممنون

siros1983

چهارشنبه 28 مرداد 1394, 11:26 صبح

سلام
سوال من اینه که آیا می شه ارتفاع یه DIV وقتی که mouseover می شه رو فقط با CSS تغییر داد بدون استفاده از JavaScript؟
من می دونم که چون یه Event رخ داده باید با JavaScript این کار رو کرد و نحوه انجامش رو هم بلدم. اما امروز یکی بهم گفت می شه فقط با CSS و بدون JavaScript یا jQuery این کار رو کرد!!
فقط می خوام بدونم شدنیه یا ایشون اطلاعاتشون درست نبوده؟
ممنون

یعنی وقتی ماوس روی div مورد نظر میبرید ارتفاعش کم و زیاد بشه؟
بله میشه کافیه توی hover مربوط به div مورد نظر هر ارتفاعی که میخواین بدید

#divwidth:hover{
width:500px;
}

sinoser

چهارشنبه 28 مرداد 1394, 17:35 عصر

سلام
سوال من اینه که آیا می شه ارتفاع یه DIV وقتی که mouseover می شه رو فقط با CSS تغییر داد بدون استفاده از JavaScript؟
ممنون
بله . علاوه بر این کار می تونید این ارتفاع رو با انیمشین زیاد و کم کنید.

مثال :

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: height 1s; /* For Safari 3.1 to 6.0 */
transition: height 1s;
}

div:hover {
height: 300px;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

fr_sdgh

پنج شنبه 29 مرداد 1394, 10:49 صبح

transition رو مرورگر های قدیمی ساپورت نمیکنن و اگه مثلا زیر منو ها باز نشه چی! خوب جی کوئری خوبیش اینه که همه مرورگرا رو ساپورت میکنه نهایتا با یه ریست میشه همه رو ساپورت کرد؛ درسته؟

siros1983

پنج شنبه 29 مرداد 1394, 10:56 صبح

transition رو مرورگر های قدیمی ساپورت نمیکنن و اگه مثلا زیر منو ها باز نشه چی! خوب جی کوئری خوبیش اینه که همه مرورگرا رو ساپورت میکنه نهایتا با یه ریست میشه همه رو ساپورت کرد؛ درسته؟

مرورگرهای قدیمی با پسوند یا هرچی میخوای اسمشو بگو
به اول transition اینا اضافه کن
-moz-
-webkit-
-ms-
-o-

sinoser

پنج شنبه 29 مرداد 1394, 11:28 صبح

نه ساپورتشون خوبه برو توی http://caniuse.com/ جستجو کن ببین. به قول دوستمون پسوند ها هم هستن.
به نظرم من کاربری که دلش نمیاد 30 مگ دانلود کنه مرورگر جدید استفاده کنه و مرورگر 20 سال پیشو استفاده می کنه همون حقشه هچل هفت ببینه . والا مگه ما وقت اضافی داریم برای اینجور افراد تنبلی زحمت بکشیم.