jquery - 如何在翻转父级时保持文本原样？

Question

这是在悬停之前

我想要这是在悬停之后

在悬停时旋转 li 后，我想像这样 [menu] 保持文本水平。如何使用简单的解决方案。我看到了一些例子，但不明白。 jQuery 也可以。请帮忙，谢谢。

section#fourth{
	margin:auto;
	width: 550px;
}
section#fourth li {
	padding: 8px 10px;
	transition: all .5s;
	background: brown;
	display: block;
	width: 30px;
	margin-bottom: 3px;
}
section#fourth li a{
color: #fff;
font-weight: bold;

}

section#fourth li:hover{
	border-bottom: 5px solid #000;
	transform: rotate(90deg);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>	


<section id="fourth">
	<h2>Example</h2>
	<nav>
		<ul class="list-inline">
			<li><a href="#">M<br>e<br>n<br>u<br></a></li>
			<li><a href="#">M<br>e<br>n<br>u<br></a></li>
			<li><a href="#">M<br>e<br>n<br>u<br></a></li>
			<li><a href="#">M<br>e<br>n<br>u<br></a></li>
			<li><a href="#">M<br>e<br>n<br>u<br></a></li>
		</ul>
	</nav>
</section>

Answer 1

将您的每个文本放入<span>标记并使用相同的方法旋转它

$(".list-inline li").hover(
   
   function() {
     
      $(this).find('a span').attr('class', 'span');
     
     if($(this).index() == 0)
        $(this).css('margin-bottom', '-32px');
     else if($(this).index() == ($(this).parent('ul').children().length) - 1)
        $(this).css('margin-top', '-32px');
     else
        {
          $(this).css('margin-bottom', '-32px');
          $(this).css('margin-top', '-34px');
        }
   },
   
  function() {
    
    if($(this).index() == 0)
       $(this).css('margin-bottom', '3px');
    else if($(this).index() == ($(this).parent('ul').children().length) - 1)
      $(this).css('margin-top', '3px');
    else
      {
        $(this).css('margin-bottom', '3px');
        $(this).css('margin-top', '3px');
      }
});

section#fourth {
  margin: auto;
  width: 550px;
}
section#fourth li {
  padding: 8px 10px;
  transition: all .5s;
  background: brown;
  display: block;
  width: 30px;
  margin-bottom: 3px;
}
section#fourth li a {
  color: #fff;
  font-weight: bold;
}
section#fourth li:hover {
  transform: rotate(-90deg);
  border-top: 5px solid #000;
}
.span {
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>


<section id="fourth">
  <h2>Example</h2>
  <nav>
    <ul class="list-inline">
      <li><a href="#"><span>M</span><br><span>e</span><br><span>n</span><br><span>u</span><br></a>
      </li>
      <li><a href="#"><span>M</span><br><span>e</span><br><span>n</span><br><span>u</span><br></a>
      </li>
      <li><a href="#"><span>M</span><br><span>e</span><br><span>n</span><br><span>u</span><br></a>
      </li>
      <li><a href="#"><span>M</span><br><span>e</span><br><span>n</span><br><span>u</span><br></a>
      </li>
      <li><a href="#"><span>M</span><br><span>e</span><br><span>n</span><br><span>u</span><br></a>
      </li>
    </ul>
  </nav>
</section>