将鼠标悬停在 Span 上可移动图像

Question

我目前在右上角设置了一个圆形图像，直到我将其从左移动到右之前，我没有任何问题。如果将鼠标悬停在跨度上，它将打开导航菜单，但也会移动圆角图像。不悬停时，它会停留在我喜欢的位置。我该如何解决这个问题？

.CSS

.dropbtn {
padding: 16px;
position: relative;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
float: right;
padding: 10px;
display: inline-block;
}
.dropdown-content {
display: none;
position: relative;
background-color: #f1f1f1;
min-width: 140px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 10px 14px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd}
.show {display:block;}
.rounded-circle {
height: 40px;
width: 40px;
border-radius: 50%;
display: inline-block;
}

JavaScript

function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}

.HTML

<div class="dropdown">
<span onclick="myFunction()" class="dropbtn"><img class="rounded-circle avatar-align" src="/assets/fallback/default-avatar-3-9fe9418585e4df60d6d1005ccf4f0c8ee871f01710b4d10c496f45b8a0ef9305.png">  </span>
<div id="myDropdown" class="dropdown-content">
<a href="/users/sign_in">Log in</a>
<a href="/users/sign_up">Sign up</a>
</div>
</div>

Answer 1

将.dropdown-contentcss 替换为下面的 css。

.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 140px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
right:20px
}

在这里，我更新的内容被替换position:relativeposition:absolute，并在.dropdown-content类中添加right:20px。

检查工作片段。

function myFunction() {
event.stopPropagation();
const dropDown = document.getElementById("myDropdown");
dropDown.classList.contains("show") ?dropDown.classList.remove("show") :dropDown.classList.add("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}

.dropbtn {
padding: 16px;
position: relative;
font-size: 16px;
border: none;
z-index:99;
cursor: pointer;
}
.dropdown {
position: relative;
float: right;
padding: 10px;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 140px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
right:20px
}
.dropdown-content a {
color: black;
padding: 10px 14px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd
}
.show {
display: block;
}
.rounded-circle {
height: 40px;
width: 40px;
border-radius: 50%;
display: inline-block;
}

<div class="dropdown">
<span onclick="myFunction()" class="dropbtn"><img class="rounded-circle avatar-align" src="https://source.unsplash.com/random/300x300"> </span>
<div id="myDropdown" class="dropdown-content">
<a href="/users/sign_in">Log in</a>
<a href="/users/sign_up">Sign up</a>
</div>
</div>