Question

给出以下css：

.myDiv:before{
    content:'';
    width:15px;
    height:15px;
    display:block;
}

.myDiv:after{
   ...
   ...
   display:none;
}

和html：

<div class='myDiv'></div>

有没有办法显示.myDiv：在psuedoelement之后悬停在：之前？我知道我可以将悬停选择器用作.myDiv：hover：之前但我不知道如何从该选择器中访问psuedoelement之后：

Answer 1

您可以添加新样式以显示:after css类中的内容，尽管这可能不是最佳做法。

.myDiv:hover:after {
    display:block;
}

http://jsfiddle.net/gk7R2/1/

Answer 2

你可以做到的唯一接近的方法就是你将整个元素悬停在这样：

.myDiv {
    height: 200px;
    background: red;
}
.myDiv:before {
    content: '';
    display: block;
    height: 20px;
    width: 100%;
    background: blue;
}
.myDiv:hover:after {
    content: '';
    display: block;
    height: 20px;
    width: 100%;
    background: blue;
}

http://jsfiddle.net/Hive7/W4ca3/

Answer 3

执行a：hover :: before之后，你无法触发：hover :: after。你可以用javascript解决这个问题。如果您想要维护一个干净的标记，您可以在这个小提琴中创建一个循环，并在伪元素后面动态添加占位符，以便您可以与它们交互，而不是尝试访问DOM中不存在的伪元素。 / p>

$("head").append("<style id='pseudoElementStyle'></style>");

var setPseudoElementDisplay = function (hover) {
    var content = hover ? ' after' : '';
    var cssRule = '.text::after { content: "' + content + '"; }';
    $('#pseudoElementStyle').text(cssRule);
};

$('.text').prepend('<span class="place-holder before">before </span>');
$('.text').append('<span class="place-holder after"> after</span>');

$('.place-holder').each(function () {
    var direction;
    var width = $(this).css('width');
    direction = $(this).hasClass('before') ? 'left' : 'right';
    $(this).css('margin-' + direction, '-' + width);
});

$('.before').mouseover(function () {
    setPseudoElementDisplay(true);
}).mouseout(function () {
    setPseudoElementDisplay(false);
});

http://jsfiddle.net/jasonjohnson115/2d96N/

有没有办法改变div的样式：在悬停在它之后的伪元素之后：在伪元素之前？

3 个答案: