Html 使用悬停在 div 上更改该 div 内的所有元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5531366/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use hover on div to change all elements inside that div
提问by Thomas
My excuses in advance, since this seems to be a problem concerning very basic understanding of CSS and maybe also Javascript.
我提前找个借口，因为这似乎是一个关于对 CSS 和 Javascript 的非常基本的理解的问题。
What I want to do is this: imagine a div which contains a h3 and a p. On hovering on the div I would like the h3 and p to change their font-weight. So far I am using this code here to change the opacity and border on hovering over the div, but I really don't know how I can refer to the two elements inside the div. I'm really sorry, but I need someone to explain it to me in very simple terms.
我想要做的是：想象一个包含 h3 和 p 的 div。悬停在 div 上时，我希望 h3 和 p 更改它们的字体粗细。到目前为止，我在这里使用此代码来更改悬停在 div 上的不透明度和边框，但我真的不知道如何引用 div 中的两个元素。我真的很抱歉，但我需要有人用非常简单的术语向我解释。
For example, I think those elements inside the div are called children, but I'm not even sure about that... I'm really working with all that HTML/CSS/Java stuff for the first time and try to figure things out as I go along. The tutorial sites I found so far couldn't solve my problem, therefore this post.
例如，我认为 div 中的那些元素称为子元素，但我什至不确定……我真的是第一次使用所有 HTML/CSS/Java 内容，并试图弄清楚随着我前进。到目前为止，我发现的教程网站无法解决我的问题，因此这篇文章。
More background information: I'm using the "smoothgallery" scriptby jondesign (Jonathan Schemoul) () and am trying to bend it to my will, but that is pretty difficult if you don't have any clue how it actually works. The site I implemented the script in can be found here.
更多背景信息：我正在使用jondesign (Jonathan Schemoul) ()的“smoothgallery”脚本，并试图按照我的意愿弯曲它，但是如果您不知道它实际上是如何工作的，那将非常困难。可以在此处找到我在其中实施脚本的站点。
Here comes the CSS part that changes the div on hover:
这是在悬停时更改 div 的 CSS 部分：
.jdGallery .gallerySelector .gallerySelectorInner div.hover{
border: 1px solid #89203B;
border-left: 0.8em solid #89203B;
background: url('../../images/teaserBox_bg.jpg') no-repeat;
background-size: 100% 100%;
filter:alpha(opacity=1);
-moz-opacity:1; /
-khtml-opacity: 1;
opacity: 1;
}
This entry in the CSS file changes the settings for e.g. the h3 inside that div,
CSS 文件中的此条目更改了该 div 中的 h3 等设置，
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3{
margin: 0;
padding: 0;
font-size: 12px;
font-weight: normal;
}
You may also want to take a look at the .js file that makes these classes, it can be found here.
您可能还想查看创建这些类的 .js 文件，可以在此处找到。
This is probably the most important part here:
这可能是这里最重要的部分：
createGalleryButtons: function () {
var galleryButtonWidth =
((this.galleryElement.offsetWidth - 30) / 2) - 14;
this.gallerySet.each(function(galleryItem, index){
var button = new Element('div').addClass('galleryButton').injectInside(
this.gallerySelectorInner
).addEvents({
'mouseover': function(myself){
myself.button.addClass('hover');
}.pass(galleryItem, this),
'mouseout': function(myself){
myself.button.removeClass('hover');
}.pass(galleryItem, this),
'click': function(myself, number){
this.changeGallery.pass(number,this)();
}.pass([galleryItem, index], this)
}).setStyle('width', galleryButtonWidth);
galleryItem.button = button;
var thumbnail = "";
if (this.options.showCarousel)
thumbnail = galleryItem.elements[0].thumbnail;
else
thumbnail = galleryItem.elements[0].image;
new Element('div').addClass('preview').setStyle(
'backgroundImage',
"url('" + thumbnail + "')"
).injectInside(button);
new Element('h3').set('html', galleryItem.title).injectInside(button);
new Element('p').addClass('info').set('html', formatString(this.options.textGalleryInfo, galleryItem.elements.length)).injectInside(button);
}, this);
new Element('br').injectInside(this.gallerySelectorInner).setStyle('clear','both');
},
So my question here is, if it is possible at all to change the h3 and p settings by using the hover function on the main div?
所以我的问题是，是否有可能通过使用主 div 上的悬停功能来更改 h3 和 p 设置？
Thanks in advance! Also for negative criticism, I don't really know if I did something wrong in the way I posted this question and if I can even ask it here.
提前致谢！同样对于负面批评，我真的不知道我发布这个问题的方式是否有问题，我是否可以在这里提问。
回答by Richard K.
You're making this way more complicated than it needs to be. No Javascript is required to do this. Let's say you've got the following:
你让这种方式比它需要的更复杂。不需要Javascript来做到这一点。假设您有以下内容：
<div class="container">
<h3>This is a header</h3>
<p>This is a paragraph</p>
</div>
So you've got a container, with a header and paragraph. Let's say you want to have the header normal weight, and the paragraph in red normally, with a padded box around the whole thing. Here are your styles:
所以你有一个容器，带有标题和段落。假设您希望标题为正常粗细，段落通常为红色，整个内容周围有一个填充框。这是你的风格：
.container { border:1px solid black; padding:10px; }
.container h3 { font-weight:normal; }
.container p { color:red; }
When you hover the mouse over the , you want the paragraph and header in bold and the box border to change to blue. Add this into your stylesheet (or <style>block) belowthe CSS above:
当您将鼠标悬停在 上时，您希望段落和标题以粗体显示，并且框边框变为蓝色。将此添加到上面 CSS下方的样式表（或<style>块）中：
.container:hover { border-color:blue; }
.container:hover h3 { font-weight:bold; }
.container:hover p { font-weight:bold; }
Note that you can save a bit of space, and make it more concise by combining the <h3>and <p>styles into one line with a comma, since they're both the same. The whole thing would now look like this:
请注意，您可以节省一点空间，并通过将<h3>和<p>样式用逗号组合成一行来使其更加简洁，因为它们都是相同的。整个事情现在看起来像这样：
.container { border:1px solid black; padding:10px; }
.container h3 { font-weight:normal; }
.container p { color:red; }
.container:hover { border-color:blue; }
.container:hover h3, .container:hover p { font-weight:bold; }
Remember that the "C" in "CSS" stands for "cascading": styles cascade down through both hierarchies (that is, a parent element's style also applies to a child element, unless it's got default styles like margins or whatever), and down the style sheet - that means styles you define after others will override them if they apply to the same element.
请记住，“CSS”中的“C”代表“级联”：样式在两个层次结构中向下级联（即，父元素的样式也适用于子元素，除非它具有默认样式，例如边距或其他样式），然后向下样式表 - 这意味着您在其他人之后定义的样式将覆盖它们，如果它们应用于相同的元素。
The ":hover" selector in CSS can pretty much be used on anything, with very few exceptions. I use them regularly for Javascript-free drop-down menus. You can find more on the ":hover" CSS selector here: W3Schools CSS reference on ":hover". In fact, the W3Schools siteis a generally great resource for brushing up your CSS.
CSS 中的 ":hover" 选择器几乎可以用在任何东西上，很少有例外。我经常将它们用于无 Javascript 的下拉菜单。您可以在此处找到有关 ":hover" CSS 选择器的更多信息：关于 ":hover" 的 W3Schools CSS 参考。事实上，W3Schools 站点通常是一个很好的资源，可用于提高您的 CSS。
