Question 42797 in Html Question posted in
Some basic documentation can be found here.

how to use hover content – Html

I have a div, which when I hover over it, another div appears, which contains a button and a link that I want to be able to use.
But until I take the mouse off the first div to go to the displayed content, they disappear. what should I do?

#account {
  display: relative;
}

#account_container {
  position: absolute;
  display: none;
  top: 8.7%;
  right: 62%;
  background-color: #e6e6e6;
  border-radius: 7px;
  width: 33.5%;
}

#account:hover+#account_container {
  display: block;
}

#account_container li {
  list-style-type: none;
  display: inline-block;
  color: #000000;
  font-size: 117%;
  margin-right: -1%;
}

#li {
  text-align: right;
  margin: 15% 5% 5% 5%;
}

#li img {
  margin-left: 6%;
  margin-bottom: -3%;
}
<div id="account"><img src="https://via.placeholder.com/50" id="user" class="icon" /></div>

<div id="account_container">
  <ul>
    <a href="">
      <div id="li">
        <li>سلام</li><img src="https://via.placeholder.com/50" /></div>
    </a>
    <a href="">
      <div id="li">
        <li>سفارش ها</li><img src="https://via.placeholder.com/50" /></div>
    </a>
    <a href="">
      <div id="li">
        <li>علاقه مندی ها</li><img src="https://via.placeholder.com/50" /></div>
    </a>
    <a href="">
      <div id="li">
        <li>خروج</li><img src="https://via.placeholder.com/50" /></div>
    </a>
  </ul>
</div>
Tags:

2

Answers


  1. 0

    You can also add the hover event to the second div:

    #account_container:hover {
  display: block;
}
    Login or Signup to reply.
  2. 0

    You have to add hover on your #account_container also,
    Your div were 100% of width, removed it, or reduce the width to make it fit with your image.

    Snippet below

    #account_container {
  position: absolute;
  display: none;
  top: 8.7%;
  right: 62%;
  background-color: #e6e6e6;
  border-radius: 7px;
  width: 33.5%;
}

#image_account:hover+#account_container, #account_container:hover {
  display: block;
}

#account_container li {
  list-style-type: none;
  display: inline-block;
  color: #000000;
  font-size: 117%;
  margin-right: -1%;
}

#li {
  text-align: right;
  margin: 15% 5% 5% 5%;
}

#li img {
  margin-left: 6%;
  margin-bottom: -3%;
}
    <img id="image_account" src="https://via.placeholder.com/50" id="user" class="icon" />

<div id="account_container">
  <ul>
    <a href="">
      <div id="li">
        <li>سلام</li><img src="https://via.placeholder.com/50" /></div>
    </a>
    <a href="">
      <div id="li">
        <li>سفارش ها</li><img src="https://via.placeholder.com/50" /></div>
    </a>
    <a href="">
      <div id="li">
        <li>علاقه مندی ها</li><img src="https://via.placeholder.com/50" /></div>
    </a>
    <a href="">
      <div id="li">
        <li>خروج</li><img src="https://via.placeholder.com/50" /></div>
    </a>
  </ul>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search