如何保持父母被翻动时的文字？

Question

这是之前悬停

我想这是后悬停

我想保持文字水平这样[菜单]悬停旋转李后。如何处理简单的解决方案。我看到一些例子，但没有理解它。 jQuery也可以。请帮助，谢谢。

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

 
} 
 

 
section#fourth li:hover{ 
 
\t border-bottom: 5px solid #000; 
 
\t 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> \t 
 

 

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

Answer 1

使用span标签的所有字母，通过transform: rotate(90deg);李的悬停旋转span。

更新HTML & CSS，我从li删除<br>。

HTML

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

更新CSS

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-top: 5px solid #000; 
    transform: rotate(-90deg); 
} 
section#fourth li span{ 
    display:block; 
} 
section#fourth li:hover span{ 
    transform: rotate(90deg); 
} 
section#fourth li:hover a{ 
    transform: rotate(90deg); 
    text-decoration: underline; 
} 

检查updated fiddle

Answer 2

把你的每一个文本<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>

Answer 3

要做到这一点，我们可以用它代替添加多个span标签，每个字分开的属性word-break: break-all和letter-spacing。

什么word-break: break-all将做你的<a>标签是它会打破任何2个字母之间的单词，如果他们不适合他们的容器的宽度。

打破每个单词之后，我们将添加属性letter-spacing，以在我们将父元素悬停后增加字符之间的间距。

编辑：这是一个jsfiddle

HTML

<section id="fourth"> 
     <h2>Example</h2> 
     <nav> 
      <ul class="list-inline"> 
       <li><a href="#">Menu</a></li> 
       <li><a href="#">Menu</a></li> 
       <li><a href="#">Menu</a></li> 
       <li><a href="#">Menu</a></li> 
       <li><a href="#">Menu</a></li> 
      </ul> 
     </nav> 
    </section> 

CSS

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; 
     word-break: break-all; 
     display: block; 
     letter-spacing: 10px; 
} 

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

    section#fourth li:hover a{ 
     transform: rotate(90deg); 
     word-break: normal; 
    }