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

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

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');
      }
    }
  }
}

函数myFunction（）{
document.getElementById（“myDropdown”）.classList.toggle（“show”）；
}
window.onclick=函数（事件）{
如果（！event.target.matches（'.dropbtn'））{
var dropdowns=document.getElementsByClassName（“下拉内容”）；
var i；
对于（i=0；i

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>

---

用下面的内容替换您的

.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:relative
到
position:absolute
，并在
中添加了
right:20px
。下拉内容
类

检查工作代码段


函数myFunction（）{
event.stopPropagation（）；
const dropDown=document.getElementById（“myDropdown”）；
dropDown.classList.contains（“显示”）？dropDown.classList.remove（“显示”）：dropDown.classList.add（“显示”）；
}
window.onclick=函数（事件）{
如果（！event.target.matches（'.dropbtn'））{
var dropdowns=document.getElementsByClassName（“下拉内容”）；
var i；
对于（i=0；i

.dropbtn{
填充：16px；
位置：相对位置；
字体大小：16px；
边界：无；
z指数：99；
光标：指针；
}
.下拉列表{
位置：相对位置；
浮动：对；
填充：10px；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f1f1；
最小宽度：140px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
右：20px
}
.下拉内容a{
颜色：黑色；
填充：10px 14px；
文字装饰：无；
显示：块；
}
.下拉列表内容a：悬停{
背景色：#ddd
}
.表演{
显示：块；
}
.圆形{
高度：40px；
宽度：40px；
边界半径：50%；
显示：内联块；
}

能否生成一个可运行的代码段，或者至少生成HTML标记..我的错，修复它并添加一个HTML代码段。尝试修改此按钮以使问题发生，我找不到问题所在。这修复了角色的移动，但现在按钮基本上位于图像下方。而且不在顶部，所以它不符合要求。@MartinIAm这是因为您的
窗口。click
事件与
myFunction（）
一起工作，因此当调用
myFunction（）
时，它会将
show
类添加到块中，同时
窗口。click（）
也会触发，这将删除
show
类。要防止出现这种情况，请添加“event.stopPropagation（）；”转到
myFunction（）
。检查更新的代码段