按钮栏显示文本悬停

Question

我想知道是否有某种方法只使用CSS（No JS）生成以下内容

这就是我想要完成的事情：

只是一个带有2个字体真棒图标的div

鼠标悬停在笔图标上

鼠标悬停在X图标

上

我已尝试使用transformation并从display: none转到display: block，但似乎无法为该CSS属性设置动画。 我目前的代码如下所示：

section.container {min-width: 500px; margin: 10% auto; text-align: center;}
.text-on-hover {cursor: pointer; font-size:20px;}

.text-on-hover:hover:before {opacity: 1;}
.text-on-hover:before {
  content: attr(data-hover);
  margin: 0 10px;
  opacity: 0; 
  transition: all .5s ease-in-out;
}

<section class="container">
  <i class="text-on-hover" data-hover="A long text">A</i>
  <i class="text-on-hover" data-hover="Another long text">B</i>
</section>

有哪些方法可以做到这一点？如果没有，为什么？

Answer 1

编辑：查看第二个片段。

这是你如何实现它。

codepen

@import url(http://fonts.googleapis.com/css?family=Ubuntu:400,500,700);
html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
}
body {
  background-color: #e58139;
}
header {
  background-color: #333;
  width: 100%;
  height: 65px;
  overflow: hidden;
}
.menu-links {
  padding-right: 20px;
}
.toggle-menu {
  position: relative;
  float: right;
  right: -220px;
  transition: right 0.5s ease-in;
}
.content {
  line-height: 43px;
}
.toggle-menu li {
	display: inline-block;
	list-style-type: none;
}
.toggle {
  padding-top: 5px;
  cursor: pointer;
}
li.toggle:hover span.toggle-menu-bar {
  background-color: #ddd;
}
.toggle-menu-bar {
	display: block;
	width: 25px;
	height: 4px;
	background-color: #e58139;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	margin: 0 auto 3px;
  transition: background-color 0.2s;
}
a {
  font-size: 25px;
  text-decoration: none;
  color: #e58139;
  padding-right: 20px;
  transition: color 0.2s;
}
a:hover {
  color: #ddd;
}
.menu-links:hover > .toggle-menu {
  right: 0;
}

<header>
  <div class="menu-links">
    <ul class="toggle-menu">
      <li class="toggle">
        <span class="toggle-menu-bar"></span>
        <span class="toggle-menu-bar"></span>
        <span class="toggle-menu-bar"></span>
      </li>
      <li class="content">
        <ul>
          <li><a href="#">Link 1</a>
          </li>
          <li><a href="#">Link 2</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</header>

编辑：复制以下内容：

codepen

body {
  background: #222222;
}
div.edit,
div.delete {
  position: absolute;
  font-size: 22px;
  color: #989898;
  display: inline-block;
  cursor: pointer;
  transition: all 0.5s;
  right: 5px;
}
div.edit {
  transform: rotate(90deg);
  right: 30px;
}
.btn-container {
  margin: 2px 0 0 155px;
}
.box {
  position: relative;
  background-color: #F5F5F5;
  width: 200px;
  height: 30px;
  border: 10px solid #DDDDDD;
}
div.edit:hover,
div.delete:hover {
  color: #272727;
}
div.edit:hover:before {
  content: 'Edit';
  position: absolute;
  color: #989898;
  font-size: 12px;
  right: 0px;
  top: 30px;
  transform: rotate(-90deg);
}
div.delete:hover:before {
  content: 'Close';
  position: absolute;
  color: #989898;
  font-size: 12px;
  right: 22px;
  top: 5px;
}
.delete:hover + .edit {
  right: 60px;
}

<div class="container">
  <div class="box">
    <div class="btn-container">
      <div class="delete">&#10006;</div>
      <div class="edit">&#9998;</div>
    </div>
  </div>
</div>

Answer 2

您无法转换CSS的显示属性。

但是对于这个具体的例子，当您向右浮动时，您可以转换菜单的正确属性，如下所示：

.toggle-menu {
    right: -220px;
    position: relative;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.toggle-menu:hover {
    right: 0;
}

以下是示例：http://jsfiddle.net/v8t2td3b/1/

（注意：我还从style="display: none;" .content

中删除了li

Answer 3

HTML

<div class="menu">
    <div class="hamburger"></div>
    <div class="menu-items">
        <a href="">...</a>
        <a href="">...</a>
    </div>
</div>

CSS

.menu-items {
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: all 0.5s ease;
}

.menu:hover > .menu-items {
    opacity: 1;
    width: 200px; /*or whatever width*/
}

是一种方法 sans JavaScript。