آموزش نمایش متن مخفی با صفت data-hover

در این آموزش طراحی سایت با استفاده از صفت data-hover در عناصر html و با استفاده از کدهای css3 به شما آموزش خواهیم داد که چگونه یک متن مخفی، بعد از هاور شدن یک عنصر نمایش داده میشود. می توانید دموی این آموزش را از این قسمت مشاهده کنید.

Array[free_vip]

ابتدا کد html مربوطه را مینویسیم. در این کد که میتواند شامل هر عنصر html باشد، از صفت data-hover استفاده میکنیم و درون این صفت، متنی که میخواهیم مخفی شود را مینویسیم.

[html]

<button data-hover="مرجع تخصصی آموزش طراحی سایت">hover me</button>

[/html]

سپس کدهای css را اضافه میکنیم. در کدهای سی اس اس این قسمت از شبه عناصر after و before برای نمایش متن مخفی شده در data-hover استفاده میکنیم.

[css]

html {
font-family: Georgia, serif;
color: #888;
}
body {
padding: 5em 2em;
text-align: center;
background: #f3f3f3;
}
button {
background: #db701f;
border: solid 7px #000;
padding: 20px;
box-shadow: inset 0 0 6px #824212;
text-transform: uppercase;
font-weight: bold;
font-family: "Tahoma", sans-serif;
text-shadow: 1px 1px 3px #824212;
color: #fff;
position: relative;
width: 300px;
cursor:pointer;
}
button:hover {
background: green;
}
button:hover:before {
/* ——- THIS IS THE MAGIC —————-*/
content: attr(data-hover);
/* ——————————————*/
display: block;
background: #000;
position: absolute;
top: 100%;
left: -7px;
right: -7px;
padding: 15px;
}
button:hover:after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border: solid 10px transparent;
border-bottom-color: #000;
bottom: 0;
left: 50%;
margin-left: -10px;
z-index: 2;
}

[/css]

[onliner_button type=”edu-demo” url=’https://onliner.ir/demo-education/css/data-attribute/data-attribute-onliner.ir.zip’]دانلود دمو[/onliner_button]

[/free_vip]

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

No Comments