Question

我有这样的结构：

<div class="home_box">
    <a href="#">
        <img alt="" src="/10829_rf-sicherheit/images/home_boxes/home1.jpg">
        <span class="box_caption" style="bottom: 0px;">
            <span class="box_title">Sicherheit</span>
            <span class="box_text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor ...</span>
        </span>
    </a>
</div>

我希望在链接悬停时访问.box_text

在css中有这样的东西

div.home_box a span.home_caption span.box_text {opacity:1;}

但这似乎不起作用？！

我的错误在哪里？

Answer 1

您需要修复错误的类和缺少的:hover伪类才能使其正常工作：

div.home_box a:hover span.box_caption span.box_text {
    opacity:1;
}

注意：

没有某些供应商前缀的所有浏览器都不支持Opacity。为了适应最大数量的浏览器，您需要添加一些额外的CSS：

div.home_box a:hover span.box_caption span.box_text { /* Required for IE 5, 6, 7 */ /* ...or something to trigger hasLayout, like zoom: 1; */ width: 100%; /* Theoretically for IE 8 & 9 (more valid) */ /* ...but not required as filter works too */ /* should come BEFORE filter */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* This works in IE 8 & 9 too */ /* ... but also 5, 6, 7 */ filter: alpha(opacity=100); /* Older than Firefox 0.9 */ -moz-opacity: 1.0; /* Safari 1.x (pre WebKit!) */ -khtml-opacity: 1.0; /* Modern! /* Firefox 0.9+, Safari 2?, Chrome any? /* Opera 9+, IE 9+ */ opacity: 1.0; }

来源： CSS Tricks

免责声明：以上代码段直接来自CSS Tricks，其中包含两项修改。第一个修改是替换他们的.transparent选择器为您制作一个完整的片段。第二个是更改不透明度值以支持您1的请求。

Answer 2

您是否尝试过使用a:hover span.home_caption span.box_text {opacity: 1;}

现在你只是指定一个标签，而不是在它被徘徊时。

Answer 3

也许你：

div.home_box a span.box_caption span.box_text {
    opacity:1;
}

您在CSS中编写home_caption，在HTML中编写box_caption

如何选择元素父子

3 个答案: