Question

大家好的一天，我创建了一个垂直菜单，我已经让菜单正常工作，但我确实在悬停方面遇到了问题。这是我的主菜单的图片

我希望每次我悬停相同的箭头都会显示在另一个菜单项上。但每次我徘徊这都是我得到的

HTML：

<div class="col-md-3 column mainbody1 otherpagesfixer" id="wnav">
  <ul class="nav">
    <li><a href="#" class="active">menu 1</a><img class="ef1" src="<?php echo get_stylesheet_directory_uri() ?>/img/menu2.png">
      </l1>
    <li><a href="#" class="active">menu 1</a>
      </l1>
    <li><a href="#" class="active">menu 1</a>
      </l1>
    <li><a href="#" class="active">menu 1</a>
      </l1>
  </ul>
</div>

的CSS：

#wnav ul{
  background-color: #efefef;
  background-image:-moz-linear-gradient(left center , white, #e6e6e6);;
}
#wnav li a{
  color:blue;
}
#wnav li a:hover{
  background-image:url('img/menu2.png');
}

Answer 1

使用background-repeat: no-repeat;

另请看这里：background-repeat Property

no-repeat: The background-image will not be repeated

Answer 2

试试这样：

<强> CSS：

#wnav li a:hover{
  background:url('img/menu2.png') no-repeat left top;
}

Answer 3

试试这个 -

#wnav li a:hover{
  background-image:url('img/menu2.png') no-repeat;
}

Answer 4

您的列表项关闭标记是错误的。它们应该是</li>而不是</l1>。

Answer 5

试试这个：

<强> HTML

<div class="col-md-3 column mainbody1 otherpagesfixer" id="wnav">
  <ul class="nav">
    <li><a href="#" class="active">menu 1</a><img class="ef1" src="<?php echo get_stylesheet_directory_uri() ?>/img/menu2.png">
      </li>
    <li><a href="#" class="active">menu 1</a>
      </li>
    <li><a href="#" class="active">menu 1</a>
      </li>
    <li><a href="#" class="active">menu 1</a>
      </li>
  </ul>
</div>

<强> CSS

#wnav ul{
  background-color: #efefef;
  background-image:-moz-linear-gradient(left center , white, #e6e6e6);;
}
#wnav li a{
  color:blue;
}
#wnav li a:hover{
  background-image:url('img/menu2.png');
  background-repeat: no-repeat
}

菜单悬停未显示为我想要的内容

5 个答案: