Question

我有以下HTML工作：

<div class="preview">
        <div class="image">
            <img src="SomeFile/SomeImage.gif">
        </div>
        <h2>Some heading</h2>
        <p>Some text</p>
    </div>

以下CSS（有效）：

.preview:hover > h2 {display: none;}
.preview:hover > p {display: block;}

如果我在HTML周围添加新的<div id="newID">，如何更新CSS以使用新的ID包装器？

另外，如何在CSS中使用多个ID以避免为每个ID重写此内容？

谢谢

Answer 1

如果您需要将样式仅应用于新包装器的子元素，那么您可以像这样添加ID选择器：

#newID .preview:hover > h2 {display: none;}

否则你不需要改变任何东西。

Answer 2

这就是你要找的吗？

<div id="newID">
    <div class="preview">
            <div class="image">
                <img src="SomeFile/SomeImage.gif">
            </div>
            <h2>Some heading</h2>
            <p>Some text</p>
    </div>
    <div class="preview">
            <div class="image">
                <img src="SomeFile/SomeImage.gif">
            </div>
            <h2>Some heading</h2>
            <p>Some text</p>
    </div>
    </div>

你的css：

#newID .preview:hover > h2 {display: none;}
#newID .preview:hover > p {display: block;}

Answer 3

使用类来设置具有相同样式的多个元素：

.yourClass:hover {}

Answer 4

我并不完全了解您正在寻找的内容，但如果您尝试将css应用于新添加的divs，那么您可以试试这个

<html><head>
<style>
.preview { border: 1px solid black;width:200px}
.preview:hover > h2 {display: none;}
.preview:hover > p {display: block;}
</style>
<script src=path/to/jquery.js></script>
</head><body>

<button class=plus>Add</button>
<div class="preview">
        <div class="image">
            <img src="SomeFile/SomeImage.gif">
        </div>
        <h2>Some heading</h2>
        <p>Some text</p>
    </div>


<script>

// Button Adds a new div with the class 'preview'
$('button.plus').click(function () {
  var new_id = '<div id="newID" class=preview>New Div <br/> <h2>Some heading</h2> <p>Some text</p></div>';
  $('body').append(new_id);
});



</script>
</body></html>

Answer 5

如果你的ID使用相同的结构，例如＃newid-x，＃newid-y，＃newid-z，你可以写你的css规则，所有ID都以newid开头 -

div[id^='newid-']:hover > h2, div[id*=' newid-']:hover >h2 {
    display: none;
}

悬停在多个ID / Class上

5 个答案: