Question

所以在CSS中这是可能的：

#Something1:hover .Something22 {...}

但是当我这样说时：

#Something1 img:hover .Something22 {...}

它不起作用。这只是图像的可能吗？

Answer 1

#Something1 img:hover .Something22 {...}

表示类Something22的元素位于img元素内。这不会有效。

如果您的班级Something22的元素就在图片之后，那么您可能需要

#Something1 img:hover + .Something22 {...}

或者，如果您的图片属于Something22课程，那么您需要：

#Something1 img.Something22:hover {...}

Answer 2

后者不起作用，因为img元素永远不会有后代。这只是无效的HTML。

引用spec关于HTML语法（强调我的）：

void元素是其内容模型永远不允许的元素   在任何情况下都有内容。虚空元素可以有   属性。

以下是HTML中的void元素的完整列表：

area，base，br，col，command，embed，hr， img ，input，keygen，link，meta，param，source，track，wbr

Answer 3

原因是因为你的第一个选择器：

#Something1:hover .Something22 {...}

选择一个项目Something22的项目，该项目位于ID为Something1的元素内，同时将其悬停在上面。

您的第二个班级会选择图片中包含类Something22的项目。图像不能包含其他元素，因此第二个选择器不起作用。

Answer 4

好吧，你可以使用jQuery

$('#Something1 img').hover(
    function(){
        // do you stuff with Something22 here
    },
    function(){}
);

当div元素内的图像悬停得到另一个div元素？

4 个答案: