鼠標懸停發生在元素周圍，不僅僅在元素上

當我將鼠標放置在靠近元素右側的任何位置時，鼠標懸停正在顯示列表。我希望只有當光標置於元素。請讓我知道我該怎麼做。鼠標懸停發生在元素周圍，不僅僅在元素上

<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/

來源

2016-03-08 Rahul

請添加CSS或JavaScript文件，還有在你的HTML代碼中沒有鼠標懸停事件。 –

請訪問小提琴...放在代碼 – Rahul

一個warpper添加到你這樣的用戶菜單中看到片段

.dropdown { 
 
bottom: 50px; 
 
left:600px; 
 
} 
 
#usermenu{ 
 
    float:left; 
 
    margin-right: 7px; 
 
} 
 
.dropdown-content { 
 
display: none; 
 
position: absolute; 
 
background-color: #f9f9f9; 
 
min-width: 160px; 
 
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
} 
 

 
.dropdown-content a { 
 
color: black; 
 
padding: 12px 16px; 
 
text-decoration: none; 
 
display: block; 
 
} 
 

 
.dropdown-content a:hover {background-color: #f1f1f1} 
 

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

 
.dropdown:hover .dropbtn 
 
{ 
 
background-color: #3e8e41; 
 
}

<div class="dropdown"> 
 
    <div id="usermenu"> 
 
<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> 
 
    </div> 
 
    <input type="button" value="Post Your Ad!" Style="color:Red; padding:5px;"></input> 
 
</div>

來源

2016-03-08 09:59:43

這對我來說是完美的。但兩個按鈕似乎很關。我如何在這兩者之間創造一些差距？ – Rahul

#usermenu { float：left; margin-right：7px; } Snippet更新 –

thankyou :)它的工作。 – Rahul

只要給一個float到.dropdown。

.dropdown { 
    float: left; 
}

JSFiddle

來源

2016-03-08 09:47:19 Pedram

以下謝謝。它幾乎解決了。但是當鼠標懸停在「張貼廣告」時，鼠標懸停仍在顯示按鈕。我希望它不會顯示爲「用戶」圖標。 – Rahul

Here you go [JSFiddle]（http://jsfiddle.net/jiffiddle/MMHVv/26/） – Pedram

謝謝大家.. – Rahul

你可以試試這個曾經

.dropdown { 
 
    bottom: 50px; 
 
    left: 600px; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
} 
 

 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
.dropdown-content a:hover { 
 
    background-color: #f1f1f1 
 
} 
 

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

 
.dropdown:hover .dropbtn { 
 
    background-color: #3e8e41; 
 
}

<span 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;" /> 
 
</span>

JSFiddle

希望它可以幫助你。

來源

2016-03-08 09:52:21 getty

這不能正常工作 – Rahul

你的CSS更改爲以下幾點：

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

從

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

Fiddle

來源

2016-03-08 09:52:46 ketan

鼠標懸停發生在元素周圍，不僅僅在元素上

回答

相關問題