To achieve the desired effect of changing the CSS of the parent
-
-
-
main-menu when hovering over an
submenu, you can use CSS selectors and the :hover pseudo-class. Here’s how you can do it:htmlhtml>
<html>
<head>
<style>
/* Style for the parent in main-menu */
#main-menu li:hover {
background-color: #f0f0f0; /* Change background color on hover */
}
/* Hide submenu by default */
.submenu {
display: none;
}
/* Show submenu when hovering over parent */
#main-menu li:hover .submenu {
display: block;
}
/* Style for the submenu items */
.submenu li:hover {
background-color: #ccc; /* Change background color on hover */
}
style>
head>
<body>
<ul id="main-menu">
<li>
<a href="#">
<i class="fa fa-building-o" aria-hidden="true">i>
Private Limited
<i class="fa fa-caret-down">i>
a>
<ul class="submenu">
<li><a href="#0">Companya>li>
<li><a href="#0">Contacta>li>
<li><a href="#0">Industrya>li>
ul>
li>
ul>
body>
html>
In this example, the CSS rule #main-menu li:hover .submenu ensures that the submenu is displayed when hovering over the parent
main-menu, and the rule .submenu li:hover changes the background color of the submenu items when hovering over them.المزيد من المعلومات
بالتأكيد، هنا بعض المعلومات الإضافية حول التعامل مع الأحداث في CSS و HTML:
-
التحكم في عناصر CSS للعناصر الفرعية باستخدام الرمز
>:
يمكنك استخدام الرمز>في CSS لتحديد العناصر الفرعية مباشرة داخل العنصر الأصلي. مثلا، لتحديد العناصر - في
submenuالذين يتم تحويلهم عند التحويت، يمكنك استخدام#main-menu li:hover > .submenu. -
الاستفادة من تأثيرات CSS لتحسين تجربة المستخدم:
يمكنك استخدام تأثيرات CSS مثل التغيير في الألوان أو الخطوط أو الحجم لجعل تفاعل المستخدم مع موقعك أكثر جاذبية وسهولة استخدامًا. -
استخدام الحالة
hoverلتحديد العناصر عند تحويلها:
يتيح لك استخدام الحالةhoverفي CSS تحديد سلوك العنصر عندما يتم تحويله بواسطة الماوس، مما يتيح لك تغيير الأنماط والألوان والحجم والعديد من الخصائص الأخرى. -
الاستفادة من الرموز والرموز الرياضية:
يمكنك استخدام الرموز الرياضية مثل>و:في CSS لتحديد العناصر بشكل دقيق وتحديد الحالات المختلفة التي يمكن أن تظهر فيها العناصر. -
استخدام أنماط CSS المتقدمة لتخصيص التصميم:
يمكنك استخدام أنماط CSS المتقدمة مثل الشفافية والزوايا المدورة والتحولات لتخصيص تصميم موقع الويب الخاص بك وجعله يبرز بشكل فريد.
إذا كنت تحتاج إلى مزيد من المعلومات حول كيفية تحقيق تأثيرات محددة أو استخدام أنماط CSS معينة، فلا تتردد في طرح المزيد من الأسئلة.
