在父母被调情的时候如何保持文本不变？

时间：2016-05-14 07:21:49

标签： jquery html css css3

before hover这是在悬停之前

after hover我希望这是在悬停之后

我希望在悬停时旋转 li 后，将文字保持水平，如 [menu] 。如何处理简单的解决方案。我看了一些例子，但不明白。 jQuery也可以。请帮忙，谢谢。

＆＃13;
＆＃13; 
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);
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：3)

对所有字母使用span标记，通过span在li悬停时轮播transform: rotate(90deg);。

更新HTML＆amp; CSS，我已从<br>删除li。

<强> 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

答案 1 :(得分：2)

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

＆＃13;
＆＃13; 
$(".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');
      }
});
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

为实现此目的，我们可以使用属性word-break: break-all和letter-spacing，而不是添加多个span标记来分隔每个单词。

word-break: break-all对<a>标记的作用是，如果它们不适合其容器的宽度，它将会破坏任意两个字母之间的单词。

在中断每个单词后，我们将添加属性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;
    }
相关问题
最新问题