Question

我有一个sidenav菜单，可以使用悬停事件滑动到屏幕上。当菜单打开时，我希望图标位于文本的右侧。

CSS代码：

.sidenav ul > li a div {
width: 70px;
position: absolute;
left: 0; --> right:0
top: 0;
padding: 14px 24px;
height: 51px; }

Answer 1

选中 Working Fiddle

$(".sidenav.right").mouseleave(function () {
      $(".sidenav.right").removeClass('sidenavhover');
      $(".sidenav.right li.user").removeClass('usershow');
      $(".overlay").fadeOut();
});

发生鼠标悬停和鼠标悬挂事件的主要组件是<nav>，类右侧为右侧。

Answer 2

我想你可以改变指出mouseover / mouseleave函数中这些元素位置的css属性，如下所示：

$(".sidenav.right").mouseover(function () {
  $('.sidenav ul > li a div').css('left', 'inherit');
  $('.sidenav ul > li a div').css('right', '0');
  $('.sidenav ul > li a').css('paddingLeft', '15px');
  $(".sidenav.right").addClass('sidenavhover');
  $(".sidenav.right li.user").addClass('usershow');
  $(".overlay").fadeIn();
});
$(".sidenav.right").mouseleave(function () {
  $('.sidenav ul > li a div').css('right', 'inherit');
  $('.sidenav ul > li a div').css('left', '0');
  $('.sidenav ul > li a').css('paddingLeft', '100px');
  $(".sidenav.right").removeClass('sidenavhover');
  $(".sidenav.right li.user").removeClass('usershow');
  $(".overlay").fadeOut();
});

这里是fiddle。

菜单改变方向（从右到左）？

2 个答案: