حتما توجه کرده اید در بعضی از سایت ها وقتی موس روی قسمتی از صفحه و یا روی متنی خاص قرار میگیرد یا به اصطلاح هاور میشود یک باکس جدید ظاهر میشود و وقتی موس از روی آن بخش خارج میشود باکس مورد نظر هم محو میشود.
توی این مقاله می خواهیم این تولتیپ که فقط با استفاده از html و css کد شده است را آموزش دهیم.
ابتدا یک تگ <a> درست می کنیم و بعد متنی که میخواهیم هنگام هاور شدن موس نمایش داده شود در یک تگ <span> قرار می دهیم مثل کدی که در پایین مشاهده می کنید.
|
1 |
<a class="tooltip" href="#">خانه وب ایران<span>بهترین</span></a> |
اصل کار از اینجا به بعد است که باید با استفاده از خاصیت های css این امکان را فراهم کنیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
a.tooltip { position:relative; color:#000; text-decoration:none; } a.tooltip:before { content:"◊ "; color:#FD0700; } a.tooltip span { padding:5px 10px; background:#FD0700; border:1px solid #FD0700; border-radius:3px; min-width:70px; position:absolute; top:25px; left:5px; color:#fff; box-shadow:0px 1px 0px #fff; text-align:center; opacity:0; -moz-transition: opacity 1s ease; -webkit-transition: opacity 1s ease; -o-transition:opacity 1s ease; transition: opacity 1s ease; } a.tooltip span:before { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #FD0700; z-index:5; content: " "; position:absolute; top:-5px; left:48%; } a.tooltip span:after { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #FD0700; display:block; content: " "; position:absolute; top:-6px; left:48%; } a.tooltip:hover span { opacity:1; } |
آموزش تغییرات در کد:
شما می توانید از این تولتیپ هنگام هاور شدن عکس و یا دیگر تگ های html استفاده کنید کافیی است بجای “خانه وب ایران” تگ های مورد نظر را بنویسید.
خط 3: رنگ متن اصلی می توانید عوض کنید.
خط 7: یک علامت قبل از متن اصلی است “◊” که می توانید حذف و یا تغییر دهید و رنگ آن هم در خط 8 قابل تغییر است.
خط 12: برای تغییر پس زمینه تولتیپ است.
خط 19: برای تغییر رنگ متن تولتیپ می باشد..
ممنون از توجه تون – سوالات خودتونو در بخش نظرات مطرح کنید.
۲ پاسخ
سلام ممنونم از این آموزش و کد هایی که آماده کردین
موفق باشید