相关疑难解决方法(0)

结合:之后:悬停

我想在CSS(或任何其他伪选择器)中结合:after使用:hover.我基本上有一个列表,selected该类的项目使用了箭头形状:after.我希望对于正在盘旋但不能让它工作的对象也是如此.继承人的代码

#alertlist
{
    list-style:none;
    width: 250px;
}
#alertlist li
{
    padding: 5px 10px;
    border-bottom: 1px solid #e9e9e9;
    position:relative;
}
#alertlist li.selected, #alertlist li:hover
{
    color: #f0f0f0;
    background-color: #303030;
}

#alertlist li.selected:after
{
    position:absolute;
    top: 0;
    right:-10px;
    bottom:0;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #303030;
    content: "";
}

<ul id="alertlist">
    <li>Alert 123</li>
    <li class="selected">Alert 123</li>
    <li>Alert 123</li>
</ul>

Run Code Online (Sandbox Code Playgroud)

css css-selectors pseudo-element

Chr*_*ris

2017 07-04

157
推荐指数

3
解决办法

23万
查看次数

:悬停:在text-decoration之前没有效果？

作为标题,我正在使用添加图标.icon-*.向超链接添加图标时:

<a href="#" class="icon-email icon-large">Email me!</a>

Run Code Online (Sandbox Code Playgroud)

按content属性插入的内容在悬停时显示下划线文本修饰.我想禁用text-decoration之前的内容:

[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: 'IcoMoon';
    font-style: normal;
    speak: none;
}
.icon-mail:before {
    content: "\37";
}
[class^="icon-large-"]:before, [class*=" icon-large"]:before {
    font-size: 48px;
    line-height: 48px;
}
a[class^="icon-"]:before, a[class*=" icon-"]:before {
    margin-right: 5px;
    vertical-align: middle;
}

Run Code Online (Sandbox Code Playgroud)

我试过这个,但它不起作用(装饰仍然可见):

a[class^="icon-"]:hover:before, a[class*=" icon-"]:hover:before {
    text-decoration: none;
    color: white;
}

Run Code Online (Sandbox Code Playgroud)

css css-selectors pseudo-element

gre*_*emo

2012 07-14

28
推荐指数

2
解决办法

2万
查看次数

SASS:之后:悬停选择器

如何在悬停状态下在伪选择器中使用SASS选择器？想要编写更少的代码并清理它.

首选方法,不工作:

div {
    a {
        transition: all 0.25s ease-in-out;
        &:after {
            content: ">>";
            left: 10px;
            :hover & {
                left: 10px;
            }
        }
    }
}

Run Code Online (Sandbox Code Playgroud)

相反:

div {
    a {
        transition: all 0.25s ease-in-out;
        &:after {
            content: ">>";
            left: 10px;
        }
        &:hover {
            &:after {
                left: 10px;
            }
        }
    }
}

Run Code Online (Sandbox Code Playgroud)

css sass css-selectors

Ale*_*ham

lucky-day

6
推荐指数

1
解决办法

3万
查看次数

使用after伪元素的CSS主动选择器

我有一个问题要在伪选择器后的活动图标选择器上实现.以下是我尝试过的代码.

<html>
<head>
<style type="text/css">
.btn{
width:25%;          
}
.name{
background: #fff;
color: #000;
text-align: center;
height: 35px;
line-height: 35px;
font-size: 18px;
border: 1px solid;  
} 
.name:after{
content: "";
position: absolute;
left: 210px;
top: 19px;
background-image: url('dark.png');
width: 15px;
height: 15px;
background-size: 100% auto; 
}
.name:after:active{
background-image: url('light.png');
}
</style>
</head>
<body>
<div class="btn name">Submit</div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)