Question

我正在尝试创建一个菜单，当用户将鼠标悬停在其中时，标签或文本将显示在右侧，我设法使用下面的代码创建一个简单的效果。但我迷失了，如何在悬停时出现标签。

#side-menu {
background-color : black;
color:white;
width:80px;
padding:20px;
list-style:none;
}

#side-menu:hover {
	width: 400px !important;	
	display:inline-block;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>


<ul id="side-menu">
        <li>
             <i class="fa fa-image fa-2x" style="margin-left:17px;"></i>     
        </li>
    </ul>

我的目标是在悬停时在右侧显示标签或文字，是否有任何建议可以实现此目的？到目前为止，这是我的代码。提前谢谢！

<li><i class="fa fa-image fa-2x" style="margin-left:17px;"></i> <span class='label-menu'> Product Image <span></li>

.label-menu{
display:none;
}

Answer 1

这应该可以解决问题。

NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc]
                                                initWithString:@"I have read, understand and agree to the following terms and conditions and web usage policy." attributes:nil];
NSRange conditionlinkRange = NSMakeRange(50,70);
// for the word "terms and conditions" in the string above
NSRange policylinkRange = NSMakeRange(75,92);
NSDictionary *linkAttributes = @{ NSForegroundColorAttributeName : [UIColor colorWithRed:0.05 green:0.4 blue:0.65 alpha:1.0],
                                  NSUnderlineStyleAttributeName : @(NSUnderlineStyleSingle) };
[attributedString addAttributes:linkAttributes range:policylinkRange];
[attributedString addAttributes:linkAttributes range:conditionlinkRange];

#side-menu {
  background-color: black;
  color: white;
  width: 80px;
  padding: 20px;
  list-style: none;
  transition: ease-in-out all .4s;
  display: table;
}

li {
  width: 50%;
  height: 100%;
  display: table-cell;
}

.side-menu__label {
  float: left;
  width: 100px;
  opacity: 0;
  position: absolute;
  transition: ease-in-out all .4s;
}

#side-menu:hover {
  width: 400px;
}

#side-menu:hover .side-menu__label {
  opacity: 1;
}

Answer 2

当鼠标悬停在图标上时，您可以显示文字：

span{
    display:none;
}
#side-menu {
    background-color : black;
    color:white;
    width:80px;
    padding:20px;
    list-style:none;
}

#side-menu:hover {
    width: 400px !important;	
    display:inline-block;
}
#side-menu:hover span{
    display:inline-block;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<ul id="side-menu">
    <li>
        <li>
            <i class="fa fa-image fa-2x" style="margin-left:17px;"></i> 
            <span>Product Image</span
        </li>
    </li>
</ul>

Answer 3

你可以看到代码

#side-menu {
background-color : black;
color:white;
width:180px;
padding:20px;
list-style:none;
position: relative;
}

#side-menu:hover {
	display:inline-block;
}


.label-menu,
#side-menu i{
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  margin: 0 5px;
}

#side-menu:hover .label-menu {
  display: inline-block;
}
.label-menu {
  display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>


<ul id="side-menu">
<li><i class="fa fa-image fa-2x"></i> <span class='label-menu'> Product Image </span></li>

    </ul>

Answer 4

您可以在列表项中添加范围，并在悬停时显示：

#side-menu {
background-color : black;
color:white;
width:150px;
padding:20px;
list-style:none;
}
#side-menu li span.fa {
  display: inline-block;
  margin-right: 10px;
}

#side-menu li span.fa:hover ~ span {
	display:inline-block;
}
#side-menu li span.fa ~ span {
  display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>


<ul id="side-menu">
        <li>
             <span class="fa fa-image fa-2x"></span><span>your Text here</span>     
        </li>
    </ul>

Answer 5

实现此目的的另一种方法是在CSS中添加一个简单的静态文本。例如

＆＃13;

#side-menu {
background-color : black;
color:white;
width:80px;
padding:20px;
list-style:none;
}
#side-menu:hover {
	width: 400px !important;	
	display:inline-block;
}
#side-menu li:hover:after {
	content: ">> Hovering >>"; /* You can add simple static text in CSS as well. */
    position: inline-block;

}
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>


<ul id="side-menu">
        <li>
             <i class="fa fa-image fa-2x" style="margin-left:17px;"></i>     
        </li>
        <li>
             <i class="fa fa-image fa-2x" style="margin-left:17px;"></i>     
        </li>
    </ul>

＆＃13;

这是使用:: after和:: before伪元素添加微小DOM的最快方法。

要更好地控制文本内容，您可以使用常规元素，如下所示

＆＃13;

#side-menu {
background-color : black;
color:white;
width:80px;
padding:20px;
list-style:none;
}

#side-menu:hover {
	width: 400px !important;	
	display:inline-block;
}
#side-menu li span {
   visibility: hidden;
   display:inline-block;
}
#side-menu li:hover span {
	visibility: visible;

}
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>


<ul id="side-menu">
        <li>
             <i class="fa fa-image fa-2x" style="margin-left:17px;"></i>
             <span> Label 1</span>     
        </li>
        <li>
             <i class="fa fa-image fa-2x" style="margin-left:17px;"></i>
             <span> Label 2</span>     
        </li>
    </ul>

＆＃13;

CSS在悬停时显示文本或标签

5 个答案: