بستن منو
۴۲
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با CSS
7
نمایش متن در CSS
7
ساخت حاشیه (border) در CSS
4
عکس ها در CSS
2
ساخت انیمیشن در CSS
6
لینک ها (links) در CSS
5
رنگ ها در CSS
1
مباحث عمومی در CSS
10
×

دانلود فروشگاه اندروید کلیدستان

554

نویسنده

علیرضا گلمکانی ( admin )

شماره کلید
دسته کلید - دسته بندی

تغییر رنگ پس زمینه یک عنصر div، با اشاره موس و به صورت سریع، در CSS

در این مبحث قصد داریم که یک عنصر div با طول و عرض مشخص بسازیم و سپس با استفاده از مشخصه های CSS ، تعیین کنیم که اگر کاربر موس را بر روی عنصر div برد، رنگ پس زمینه آن، تغییر کند (به صورت سریع، نه تدریجی). نتیجه نهایی به صورت زیر می باشد (موس خود را بر روی مربع رنگی ببرید تا رنگ آن تغییر کند) :

نتیجه :

Result

برای این منظور، کدهای صفحه را به صورت زیر می نویسیم :


<html>
 
<head>
<style type="text/css">
div {
    width: 3em;
    height: 3em;
    background-color: red;
}
div:hover {  
    background-color: blue;
}                                        
</style>
</head>
 
<body>

<div>
</div>

</body>
</html>

همان طور که مشاهده می کنید، درون تگ body از صفحه HTML ، یک عنصر div ساخته ایم. کدهای CSS ، درون زوج تگ style نوشته شده اند.

به این بخش از کدهای CSS توجه کنید :


div {
    width: 3em;
    height: 3em;
    background-color: red;
}

همان طور که مشاهده می کنید، برای عنصر div ، سه مشخصه تعریف کرده ایم. مشخصه width ، برای تعیین عرض عنصر div ، مشخصه height ، برای تعیین ارتفاع عنصر div و مشخصه background-color ، برای تعیین رنگ پس زمینه عنصر div می باشد (برابر رنگ قرمز).

ادامه کدهای CSS ، به صورت زیر می باشد :


div:hover {  
    background-color: blue;
}

عبارت div:hover به این معنی است که مشخصه هایی که تعیین می کنیم، زمانی به عنصر div اعمال شوند که کاربر، موس خود را بر روی آن برده باشد. مشخصه background-color را برابر blue (آبی) در نظر گرفته ایم که باعث می شود وقتی کاربر موس خود را بر روی عنصر div می برد، رنگ پس زمینه آن، به رنگ آبی تغییر پیدا کند.

کپی برداری از محتوای سایت کلیدستان، ممنوع بوده و پیگرد قانونی دارد. (تنها استفاده شخصی کاربر، مجاز است) (کپی برداری توسط سایر وب سایت ها = حرام) (بیشتر بدانید)

خوانده شد
مبحث بالا، مفید بود و سایت کلیدستان را دوست داشتم :
محبوب کردن این مبحث در گوگل :
اون چیزی که میخواستم نبود :
سوال دارم :
ارسال نظر :
نظرات 0 0 0

*** نظر بدهید

دسترسی سریع

×

شماره کلید


کلید
×

شماره دسته کلید


دسته کلید
×

جستجو


جستجو

راهنمای مشخصه های CSS

راهنمای مشخصه های CSS بر اساس حرف اول مشخصه :

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

بستن منو
۳۵
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
دسترسی سریع به دسته کلیدها :

CSS Tutorials
مجموعه ویدئوهای آموزشی CSS - مجموعه CSS Tutorials
35
بستن منو
۷
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
دسترسی سریع به دسته کلیدها :

Sass & SCSS Tutorial for Beginners
مجموعه ویدئوهای آموزشی Sass و SCSS برای مبتدیان - مجموعه Sass & SCSS Tutorial for Beginners - از thenewboston.com
7
بستن منو
۸
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
دسترسی سریع به دسته کلیدها :

Less CSS Tutorials for Beginners
مجموعه ویدئوهای آموزشی Less CSS برای مبتدیان - مجموعه Less CSS Tutorials for Beginners - از thenewboston.com
8
بستن منو
۵۸
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با HTML
24
نمایش متن، در HTML
5
نمایش عکس، در HTML
5
لینک ها (Link)، در HTML
1
لیست ها (List)، در HTML
1
جدول ها (Table)، در HTML
2
فرم ها (Form)، در HTML
10
مباحث عمومی، در HTML
10

آخرین کلیدهای غیررایگان

شما هم می توانید کلیدهای غیررایگان منتشر کنید (بیشتر بدانید)