هاور hover
سوال جدیدسلام
من در سند html کلاسی دارم به فرض نامش است x که درونش متنی قرار داره با کلاسی به نام y
در سند css هم به کلاس x طول و عرض دادم بعلاوه بک گراند و در کلاس y هم متن رو طوری مرتب کردم که درون اون طول و عرضی که دادم خوب بشینه
اما مشکل اینه که من به کلاس x خودم هاور میدم و بک گراندش رو میخوام وقتی موس رفت روش رنگش تغییر کنه میاد متن های درونش رو هاور میکنه در حالی که من نمیخوام متنش تغییر کنه در واقع انگار که دارم به کلاس y هاور میدم
<div class="gt">
<pre class="ep"> price is : 300 lir </pre>
<pre class="ep"> place is : ezmir </pre>
<a href="#" > <pre> more info </pre> </a>
</div>
.gt
{
z-index: 3;
width: 180px;
height: 130px;
background-color: rgb(255, 255, 255);
position: relative;
border: solid;
border-radius: 5px;
margin: 15px;
margin-right: 35px;
float: right;
}
pre.ep
{
text-align: center;
direction: ltr;
margin:auto 0;
margin-bottom: 20px;
margin-right:20px ;
font-size: large;
font-weight: bold;
text-transform: capitalize;
}
.gt :hover
{
display: block;
background-color: yellow;
}
سلام
موردی که اشاره کردید به خاطر فاصله ای هست که بین سلکتورهای gt. و hover: قرار دادین.همانطور که می دانید وجود فاصله (فضای خالی ) بین دو سلکتور به عنوان descendant combinator در نظر گرفته می شود و نشان دهنده ارتباط پدر و فرزندی بین آنهاست، در این حالت استایل ها برای سطح بعدی اجرا می شود. برای رفع این مشکل، فاصله رو حذف کنین و به این صورت بنوسید
.gt:hover
{
display: block;
background-color: yellow;
}
زنده باد عجب نکته ظریفی