Css 悬停时在链接上显示可单击图标_Css

Css 悬停时在链接上显示可单击图标

css

Css 悬停时在链接上显示可单击图标,css,Css,首先，我对CSS不是很坚定。我试图在鼠标上方的侧边栏链接（导航一级）上显示一个图标（右侧）。侧边栏链接当前使用100%的侧边栏。你有小费给我吗 <ul> <li class="nav-first-level"> <a class="facetGroup" href="#">Cardiology<span class="fa arrow"></span></a>

首先，我对CSS不是很坚定。我试图在鼠标上方的侧边栏链接（导航一级）上显示一个图标（右侧）。侧边栏链接当前使用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>

这应该能让你达到目的，坐吧

•用你的

交换.image
类。facetGroup

>删除

使用

和交换演示

。用你的标记组播放类。基本上遵循下面的操作方式，并使用选择器进行自定义

使用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>


ulli：悬停{
列表样式图像：url（'https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-forward-16.png');
} 
ulli ulli
{
列表样式类型：无；
}

心脏病学

城市1
城市2
城市3


其他

oitem1
oitem2
oitem3




正在使用JSFIDLE示例：您的问题非常令人困惑，请尝试隔离您希望在何处执行此操作，以及选择什么。哦……对不起。选择器“markGroup”应置于选择器“facetGroup”之上
.itemsContainer {
    background:red; 
    float:left;
    position:relative
}
.itemsContainer:hover .play{display:block}
.play{
  position : absolute;
    display:none;
    top:20%; 
    width:40px;
    margin:0 auto; left:0px;
    right:0px;
    z-index:100
} 

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