html - 鼠标悬停发生在元素周围，而不仅仅是在元素上

Question

当我将鼠标放在元素右侧附近的任何位置时，鼠标悬停会显示列表。我希望它仅在光标放在元素上时显示。请让我知道我该怎么做。

<div class="dropdown">
      <a href="#" class="btn btn-success btn-lg"><span class="glyphicon glyphicon-user"></span> User</a>
       <div class="dropdown-content">
      <span class="glyphicons glyphicons-user"></span>
      <a href="#">My Account</a>
      <a href="#">Logout</a>
     </div>
     <input type="button" value="Post Your Ad!" Style="color:Red; padding:5px;"></input>
       </div>

http://jsfiddle.net/Rahul_16/MMHVv/24/

Answer 1

将您的 css 更改为以下内容:

.btn:hover + .dropdown-content 
{
    display: block;
}

来自

.dropdown:hover .dropdown-content 
{
    display: block;
}

Fiddle