رفتن به مطلب

تبدیل Hover به onClick ??


پست های پیشنهاد شده

سلام

من میخواستم بدونم میشه کدهای css که توی قسمت hover انجام میشه رو توی onclick ریخت

میخوام وقتی که روی تیتر پست یا هرجایی کلیک میکنن عرض بکگراند زیاد بشه

لینک به ارسال

رویداد کلیک CSS ندارد

یا باید از js استفاده کنید یا http://www.ryancollins.me/?p=1041

  • امتیاز 2
لینک به ارسال

اون چیزی که میخوام اینه


<!DOCTYPE html>
<html>
<head>
<style>div { width:50px; height:70px; float:left; margin:5px;
background:rgb(255,140,0); cursor:pointer; } </style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div></div>
<div></div>

<div></div>
<div></div>
<div></div>
<script>$("div").one('click', function () {
$(this).height(30)
.css({cursor:"auto", backgroundColor:"green"});
});</script>

</body>
</html>

استیل من :

#post-c

ویرایش شده توسط wSaman
لینک به ارسال

این جکوئری را تست کنید


<script>$("#post-c").one('click', function () {
$(this).height(30)
.css({cursor:"auto", backgroundColor:"green"});
});</script>

+ جکوئری را هم در صفحه لود کنید

  • امتیاز 2
لینک به ارسال

حالا یه مشکل دیگه

فقط روی یک #post-c انجام میشه

درصورتی که توی دمو روی 5 تا divکار میکنه

http://api.jquery.com/height/

مشکل چیه :-?

ویرایش شده توسط wSaman
لینک به ارسال

در مثال براساس تگ هست و برروی هر تگ DIV کلیک شود رویداد رخ میدهد

در کد شما باید با توجه به parent رویداد رخ بدهد

چنین حالتی برای مثال


<script>$("#post li").one('click', function () {
$(this).height(30)
.css({cursor:"auto", backgroundColor:"green"});
});</script>

  • امتیاز 2
لینک به ارسال

آقا خیلی مردی

دمت گرم

این مشکلم حل شد

تشکر

حالا اگر بخوایم عرضش مثل اول بشه باید چیکار کنیم؟

یه چی شبیه باز و بسته کردن بشه

ویرایش شده توسط wSaman
لینک به ارسال

یه راه پیدا کردم که قشنگ هم هست :D


<script>$(".style1 #post-c").on('dblclick', function () {
$(this).height(15)
.css({cursor:"auto", border: "1px solid #eee;"});
});</script>
<script>
$(".style1 #post-c").on( "click", function() {
$(this).height(300)
.css({cursor:"auto", border: "1px solid #eee;"});
});
</script>

ویرایش شده توسط wSaman
لینک به ارسال

لطفا برای ارسال دیدگاه وارد شوید

شما بعد از اینکه وارد حساب کاربری خود شدید می توانید دیدگاهی ارسال کنید



ورود به حساب کاربری
×
×
  • اضافه کردن...