Question

首先，我对CSS不是很坚定。我尝试在鼠标悬停时在侧边栏链接（导航第一级）上显示一个图标（右侧）。 Sidebar-Link目前使用100％的补充工具栏。你有给我的小费吗？

<ul>                        
<li class="nav-first-level">
    <a class="facetGroup" href="#">Cardiology<span class="fa arrow"></span></a>
    <span class="markGroup "><i class="fa fa-pencil fa-2" ></i></span>

            <ul class="nav nav-second-level collapse">

                                <li ng-repeat="facet in cardiologyItems">
                                    <a href="#" ng-attr-title="facet.group + ': ' + facet.name" ng-click="getTitle(facet.group, facet.name)"><span>{{ facet.name }}</span></a>
                                </li>

            </ul>
    </li>
</ul>

Answer 1

这应该让你到那里，采取 look (show image icon on rollover with CSS) 。

•使用U＆gt;交换.image课程移除.facetGroup使用<span>并与您的。<div>交换演示版.play。 基本上按照以下方式完成，并使用您的选择器进行自定义！

markGroup

CSS ：

<div class="itemsContainer">
    <div class="image"> <a href="#">  <img src="http://www.itsalif.info/blogfiles/video-play/vthumb.jpg" /> </a></div>
    <div class="play"><img src="http://cdn1.iconfinder.com/data/icons/flavour/button_play_blue.png" /> </div>
</div>

Answer 2

使用li：hover属性。试试这个：

<html>
<body>
<style>
ul li ul li:hover {
    list-style-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-forward-16.png');
} 
ul li ul li
{
    list-style-type: none;
}
</style>
<ul>
    <li>Cardiology
        <ul>
            <li>citem1</li>
            <li>citem2</li>
            <li>citem3</li>
        </ul>
    </li>
    <li>Other
        <ul>
            <li>oitem1</li>
            <li>oitem2</li>
            <li>oitem3</li>
        </ul>
    </li>
</ul>
</body>
</html>

使用JSFiddle示例：https://jsfiddle.net/t41w9u2w/2/

在悬停时显示链接上的可点击图标

2 个答案: