html - 当 div 元素内的图像悬停时获得另一个 div 元素？

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。

引用HTML 语法规范（强调我的）：

void 元素是其内容模型在任何情况下都不允许它拥有内容的元素。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(){}
);