Question

如何在伪元素上进行CSS转换？

样品：

<div class="foo" data-foo='baz'>bar</div>
<div>hover below for the working (non-pseudo) effect</div>
<div class="tar" data-foo='arrr'>nyan</div>

样式：

.foo {
    margin: 20px;
    padding: 6px;
    background-color: #fcc;
}

.foo:after {
    margin-left: 4px;
    content: 'hoot';
    font-weight: bold;
    opacity: 0;
    -webkit-transition: opacity 1s ease;
}

.foo:hover:after {
    opacity: 1;
}




.tar {
    margin: 20px;
    padding: 6px;
    background-color: #fcc;
}

.tar {
    margin-left: 4px;
    content: 'hoot';
    font-weight: bold;
    opacity: 0;
    -webkit-transition: opacity 1s ease;
}

.tar:hover {
    opacity: 1;
}

小提琴：

http://jsfiddle.net/sdzUp/1/

这似乎仅适用于firefox（带有适当的前缀）

Answer 1

你可以试试这种方式

<强> HTML

<div class="foo" data-foo='baz'>bar <font>hoot</font></div>
<div>hover below for the working (non-pseudo) effect</div>
<div class="tar" data-foo='arrr'>nyan</div>

<强> CSS

.foo {
    margin: 20px;
    padding: 6px;
    background-color: #fcc;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
}
.foo font{
    font-weight: bold;
    opacity: 0;
    -webkit-transition: opacity 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
}
.foo:hover font{
    opacity: 1;
}
.foo:hover:after {
    opacity: 1;
}
.tar {
    margin: 20px;
    padding: 6px;
    background-color: #fcc;
}
.tar {
    margin-left: 4px;
    content: 'hoot';
    font-weight: bold;
    opacity: 0;
    -webkit-transition: opacity 1s ease;
    -moz-transition: opacity 1s ease;
    transition: opacity 1s ease;
}
.tar:hover {
    opacity: 1;
}

DEMO：http://jsfiddle.net/enve/sdzUp/5/

Chrome中伪元素的CSS转换

1 个答案: