omidkhosravifar
یک شنبه 17 آبان 1394, 16:38 عصر
خواهش می کنم.
hover روی تمام المان ها (نه فقط لینک ها) قابلیت اجرا داره.
در واقع، در CSS اگه بخواین با hover روی یک المان، المان دیگه ای تغییر کنه، المان دوم باید یا درون المان اول باشه (یعنی رابطه child و parent داشته باشن) و یا اینکه المان دوم باید sibling المان اول باشه (یعنی هر دو المان درون یه المان رده بالاتر قرار داشته باشن).
سعی می کنم با کدهای خودتون، چند مثال از این موارد رو برای شما توضیح بدم:
مورد (1): p درون a قرار داره (یعنی p در واقع child یا descendant تگ a هست):
<head>
<style>
p {
display:none;
}
a:hover p {
display:block;
}
</style>
</head>
<body>
<a href="#">Home
<p class="test3">This is shown on hover</p>
</a>
</body>
در این مورد با همون کد CSS شما hover اتفاق می افته.
اما کد html شما از نوع مورد (2) هست که p بعد از a قرار گرفته و باهاش رابطه sibling داره (یعنی هر دو توی یک المان رده بالاتر قرار دارن)
مورد (2): p بلافاصله بعد از تگ a اومده و هر دو توی یک المان رده بالاتر (مثل تگ body در مثال زیر) قرار دارن:
<head>
<style>
p {
display:none;
}
a:hover + p {
display:block;
}
</style>
</head>
<body>
<a href="#">Home</a>
<p class="test3">This is shown on hover</p>
</body>
در اینجا، برای اینکه hover اتفاق بیفته باید از + که بهش adjacent sibling selector میگن استفاده کنید؛ a + p یعنی المان p که بلافاصله بعد از المان a می آد در حالی که هر دوی اینا هم رده هستن.
مورد (3): p بعد از تگ a اومده و هر دو توی یک المان رده بالاتر (مثل تگ body در مثال زیر) قرار دارن، اما تگ های دیگه ای بین p و a فاصله انداخته:
<head>
<style>
p {
display:none;
}
a:hover ~ p {
display:block;
}
</style>
</head>
<body>
<a href="#">Home</a>
<h1>Contens</h1>
<div>content 1</div>
<div>content 2</div>
<p class="test3">This is shown on hover</p>
</body>
در اینجا، برای اینکه hover اتفاق بیفته باید از ~ که بهش general sibling selector میگن استفاده کنید؛ a ~ p یعنی تمام المان های p که بعد از المان a می آد (یا بلافاصله یا با فاصله) در حالی که همه اینا هم رده هستن. در واقع ~ برای مورد (2) به جای + هم جواب می ده.
با به کار بردن ~ ، هر چند تا تگ p که بعد از تگ a وجود داره (به شرطی که هم رده باشن)، با hover روی a نمایان می شن. مثلاً تو کد زیر تمام المان های p با class=test3 ظاهر می شن نه بقیه المان های p:
<head>
<style>
p {
display:none;
}
a:hover ~ p {
display:block;
}
</style>
</head>
<body>
<a href="#">Home</a>
<p class="test3">This is shown on hover</p>
<h1>Contens</h1>
<p class="test3">This is also shown on hover</p>
<div>content 1<p>Not Shown</p></div>
<div>content 2<p>Not Shown</p></div>
<p class="test3">This is also shown on hover</p>
<p class="test3">This is also shown on hover</p>
</body>
امیدوارم این اطلاعات مفید باشه.
موفق باشید.
سلام / خیلی خیلی مفید بود. از شما متشکرم . می بخشید یک رفرانس خوب در مورد CSS می فرمایید ؟ رفرانسی که بشه این جور مطالب ریز رو از اونجا استخراج کرد
ممنون . کمک شاسان توجهی بود. بازم ممنون