I have a list such that each list item contains a title. When the title is hovered upon, an info box appears (like the example below).

The problem is that when the cursor is moved from the title to the box, the box disappears.

The requirement is that the box should stay visible when the cursor is moved from the title to the box.

How can this be achieved ?

ul {
margin:0;
padding:0;
list-style: none;
}

ul li   .box {
  opacity: 0;
  visibility: hidden;
  max-height: 0;
}
    
ul li:hover   .box {
  opacity: 1;
  visibility: visible;
  min-height: 200px;
}

.box {
  background-color: #ccc;
  padding: 10px;
  text-align: right;
  border-radius: 6px;
}

<ul >
  <li  data-cont="r1">
      <p>إصدار رخصة استثمار للمستثمر الأجنبي</p>
  </li>
  <div >
      <div >
          <div>
              <p>تضاف قيمة 10,000ر.س للاشتراك في خدمات مراكز علاقات المستثمرين بوزارة الاستثمار في السنة الأولى و 60,000 ر.س في السنوات التالية / سنة </p>
          </div>
          <div>
              <p>هذا الإجراء يتطلب إنشاء حساب جديد في حال عدم وجوده</p>
          </div>

          <div>
              <p>هذا الإجراء مؤتمت</p>
          </div>
          <div>
              <p>هذا الإجراء يتطلب الدفع</p>
          </div>
      </div>
  </div>
</ul>

CodePudding user response：

The solution requires changes in the nesting structure.

1. Embed the box in li
2. Keep the list item visible and the embedded box hidden
3. When li is hovered upon, make the embedded box visible

ul {
  margin:0;
  padding:0;
  list-style: none;
}

ul li:hover > .box {
opacity: 1;
    visibility: visible;
    min-height: 200px;
}

.box {
  opacity: 0;
  visibility: hidden;
  max-height: 0;
  background-color: #ccc;
  padding: 10px;
  text-align: right;
  border-radius: 6px;
}

<ul >
  <li  data-cont="r1">
      <p>إصدار رخصة استثمار للمستثمر الأجنبي</p>
      <div >
          <div >
              <div>
                  <p>تضاف قيمة 10,000ر.س للاشتراك في خدمات مراكز علاقات المستثمرين بوزارة الاستثمار في السنة الأولى و 60,000 ر.س في السنوات التالية / سنة </p>
              </div>
              <div>
                  <p>هذا الإجراء يتطلب إنشاء حساب جديد في حال عدم وجوده</p>
              </div>

              <div>
                  <p>هذا الإجراء مؤتمت</p>
              </div>
              <div>
                  <p>هذا الإجراء يتطلب الدفع</p>
              </div>
          </div>
      </div>
      <li>
</ul>

CodePudding user response：

Hope this will fix your issue.

ul{
margin:0;
padding:0;
list-style: none;
}
ul li .box {
opacity: 0;
    visibility: hidden;
    max-height: 0;
    }
    
ul li:hover .box {
opacity: 1;
    visibility: visible;
    min-height: 200px;
}

.box {
background-color: #ccc;
padding: 10px;
text-align: right;
border-radius: 6px;
}

<ul >
                            <li  data-cont="r1">
                                <p>إصدار رخصة استثمار للمستثمر الأجنبي</p>
                                <div >
                                <div >
                                    <div>
                                        <p>تضاف قيمة 10,000ر.س للاشتراك في خدمات مراكز علاقات المستثمرين بوزارة الاستثمار في السنة الأولى و 60,000 ر.س في السنوات التالية / سنة </p>
                                    </div>
                                    <div>
                                        <p>هذا الإجراء يتطلب إنشاء حساب جديد في حال عدم وجوده</p>
                                    </div>

                                    <div>
                                        <p>هذا الإجراء مؤتمت</p>
                                    </div>
                                    <div>
                                        <p>هذا الإجراء يتطلب الدفع</p>
                                    </div>
                                </div>
                            </div>
                            </li>
                            
                  </ul>