پنهان کردن المنت های دیگر تنها با استفاده از CSS

اگر بر فرض مثال می خواهید با رفتن ماوس روی یک تصویر متنی زیر آن نمایش داده شود
اگر می خواهید با رفتن روی یک کلمه، کلماتی در مکانی دیگر نمایش داده شود
اگر خواستید با بردن ماوس روی هر المانی، المان دیگری را مخفی کنید و یا استایل آن را تغییر دهید
و فقط می خواهید این کار را با CSS انجام دهید با من همراه باشید

مثال ما از محتوای سیستم مدیریت محتوایی وردپرس است.

تصویر زیر را در نظر بگیرید و ماوس را روی آن ببرید

متن پنهان

کد CSS زیر را در بخش کدهای اضافی سفارشی سازی وبسایت خود اضافه کنید

.hid {
	opacity: 0;
	
}
.hoverDiv:hover + .hid {
	opacity: 1;
}

کد بالا با حفظ فضای بک گراند، شفافیت المان را صفر می کند.

برای این که به طور کامل المان را با فضای بک گراند از دید پنهان کنیم دستور زیر را وارد کنید

.hid {
	display: none;
	
}
.hoverDiv:hover + .hid {
	display: block;
}

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

.hid {
	display: none;
	
}
.hoverDiv:hover + .hid {
	display: block;
        color: rgb(71, 0, 65);
        font-size: 22px;
        font-weight: bold;
}

1. به بلوک تصویر مراجعه کنید و در قسمت advanced در قسمت Additional CSS class(es) تگ hoverDiv را وارد کنید.
   
2. سپس به بلوک تصویر مراجعه کنید و در قسمت advanced در قسمت Additional CSS class(es) تگ hoverDiv را وارد کنید.
3. دکمه آپدیت را بزنید و پیج وبسایت خود را رفرش کنید و تمام.