انتخاب شناور در CSS

در این مقاله با ویژگی انتخاب شناور در CSS آشنا می شویم.

انتخاب شناور تعریف شده است

انتخابگر hover در CSS در واقع یک کلاس شبه است. با استفاده از: شناور ، می توانید نحوه شکل دهی یک عنصر خاص را هنگامی که کاربر نشانگر خود را روی آن قرار می دهد بدون اینکه واقعاً روی آن کلیک کند ، تعیین کنید:

h1:hover {
    background-color: blue;
}

انتخاب شناور در CSS

شرایط نحوی انتخابگر: شناور به شرح زیر است:

انتخابگر: شناور {style}

انتخابگر را می توان به سه روش تعریف کرد:

• با استفاده از نام عنصر
• با استفاده از شناسه عنصر
• با استفاده از یک کلاس خاص

p:hover, h1:hover, a:hover {
    background-color: yellow;   
}

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

استفاده از افکت های شناور در CSS برای استایل پیوندها معمولاً معمول است:

a.link1:hover, 
a.link1:active {
    color: green;
}   
a.link2:hover, 
a.link2:active {
    font-size: 120%;
}

برای انجام این کار ، ممکن است استفاده کنید: با کلاسهای شبه دیگر حرکت کنید. انتخابگر پیوند برای پیوندهایی است که بازدید نشده اند ،: بازدید شده برای صفحات بازدید شده و فعال برای پیوندی که در حال حاضر فعال است استفاده می شود

برای سبک دهی مناسب به پیوندها ، باید در نظر داشته باشید که: link،: بازدید شده،: شناور و: کلاس های شبه فعال باید دقیقاً به همین ترتیب استفاده شوند:

/* unvisited link */
a:link {
    color: green;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: red;
}

/* selected link */
a:active {
    color: yellow;
}

همچنین می توانید پیوندی اضافه کنید تا فقط وقتی کاربر روی عنصر انتخاب شده قرار گرفت نمایش داده شود:

a {
 display: none;
} 
span:hover + a { /* Link is shown only then you hover over span element */
 display: block;
}

پیچیده تر: مثال شناور

برای درک بهتر اثرات شناور CSS ، به نمونه پیچیده تر زیر مراجعه کنید. همانطور که مکان نما را روی عنصر قرار می دهید ، یک منوی کشویی ظاهر می شود. سپس ، وقتی روی گزینه های آن می روید ، آنها برجسته می شوند:

div {background-color: blue;}
div a {
 text-decoration: none;
 color: white;
 font-size: 20px;
 padding: 15px;
 display: inline-block;
}
ul {
 display: inline;
}
ul li {
 display: inline-block;
}
ul li:hover {
 background: blue;
}
ul li:hover ul {
 display: block;
}
ul li ul {
 position: absolute;
 width: 150px;
 display: none;
}
ul li ul li {
 display: block; 
 background: blue;
}
ul li ul li a {
 display: block !important;
}
ul li ul li:hover {
 background: lightblue;
}

توجه: با استفاده از انتخابگر CSS: شناور می تواند مشکلاتی را برای کاربران صفحه های لمسی ایجاد کند ، زیرا لمس یک عنصر معمولاً به عنوان کلیک مستقیم انجام می شود.

پشتیبانی از مرورگرها

این تگ در مرورگرهای : IE، safari ، firefox، cherom، opera  و Edge پشتیبانی می شود.

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.