菜單改變方向（從右到左）？

Question

我有一個sidenav菜單，可將鼠標懸停在屏幕上。 菜單打開時，我希望圖標位於文本的右側。

jsfiddle

鼠標離開

鼠標移到

CSS代碼：

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

Answer 1

檢查此工作小提琴

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

發生mouseover和mouseleave事件的主要組件是<nav> ，其類為sidenav，right。

Answer 2

我想您可以僅更改css屬性，這些屬性指示這些元素在mouseover / mouseleave函數中的位置，如下所示：

$(".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();
});

這是小提琴 。