我想要做的是：想象一个包含h3和p的div.在盘旋上我希望h3和p改变它们的字体重量.到目前为止,我在这里使用此代码来改变悬停在div上的不透明度和边框,但我真的不知道如何引用div中的两个元素.我真的很抱歉,但我需要有人以非常简单的方式向我解释.
例如,我认为div中的那些元素被称为子元素,但我甚至不确定…我是第一次使用所有HTML / CSS / Java的东西并尝试解决问题当我走的时候.到目前为止我找到的教程网站无法解决我的问题,因此这篇文章.
更多背景信息：我正在使用“smoothgallery” script by jondesign(Jonathan Schemoul)()并试图将其弯曲到我的意愿,但如果你不知道它是如何工作的话,这是非常困难的.我实现脚本的网站可以在here找到.
这里有一个CSS部分,用于更改悬停时的div：
.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;
}
CSS文件中的此条目更改了例如div里面的h3,
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3{
margin: 0;
padding: 0;
font-size: 12px;
font-weight: normal;
}
您可能还想查看生成这些类的.js文件,可以在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,'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');
},
所以我的问题是,如果可以通过在主div上使用悬停功能来改变h3和p设置吗？
提前致谢！同样对于负面批评,我不知道我在发布这个问题的方式上是否做错了,我是否可以在这里问问题.
解决方法
<div class="container">
<h3>This is a header</h3>
<p>This is a paragraph</p>
</div>
所以你有一个容器,带有标题和段落.假设您想要标题正常权重,并且段落通常为红色,整个事物周围都有填充框.这是你的风格：
.container { border:1px solid black; padding:10px; }
.container h3 { font-weight:normal; }
.container p { color:red; }
将鼠标悬停在鼠标上时,您希望段落和标题以粗体显示,框边框更改为蓝色.将其添加到上面CSS下面的样式表(或< style>块)中：
.container:hover { border-color:blue; }
.container:hover h3 { font-weight:bold; }
.container:hover p { font-weight:bold; }
请注意,您可以节省一些空间,并通过组合< 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; }
请记住,“CSS”中的“C”代表“级联”：样式在两个层次结构中向下级联(也就是说,父元素的样式也适用于子元素,除非它有像边距或其他类似的默认样式),并且向下样式表 – 表示您定义的样式,如果它们应用于同一元素,则会覆盖其他样式.
CSS中的“：hover”选择器几乎可用于任何事情,只有极少数例外.我经常使用它们来获取无Javascript的下拉菜单.你可以在这里找到关于“：hover”CSS选择器的更多信息：W3Schools CSS reference on “:hover”.事实上,W3Schools site是刷新CSS的一般资源.
