事先请原谅,因为这似乎涉及到对CSS和可能也是Javascript非常基本的理解问题。
我想做的是:想象一个包含h3和p的div。当悬停在div上时,我希望h3和p改变它们的字体粗细。到目前为止,我正在使用此代码来更改悬停在div上时的不透明度和边框,但我真的不知道如何引用div内部的两个元素。很抱歉,但我需要有人用非常简单的术语向我解释。例如,我认为那些在div内部的元素称为子元素,但我甚至不确定...我第一次使用所有HTML/CSS/Java东西,并试图随着进展来弄清楚事情。迄今为止,我找到的教程网站无法解决我的问题,因此发布了这篇文章。
更多背景信息:我正在使用jondesign(Jonathan Schemoul)的"smoothgallery" script,并试图使其符合我的意愿,但如果您不知道它的实际工作方式,那将非常困难。我实现脚本的站点可以在这里找到。
以下是更改悬停时div的CSS部分:
这个 CSS 文件中的条目更改了该 div 内部 h3 的设置。
我想做的是:想象一个包含h3和p的div。当悬停在div上时,我希望h3和p改变它们的字体粗细。到目前为止,我正在使用此代码来更改悬停在div上时的不透明度和边框,但我真的不知道如何引用div内部的两个元素。很抱歉,但我需要有人用非常简单的术语向我解释。例如,我认为那些在div内部的元素称为子元素,但我甚至不确定...我第一次使用所有HTML/CSS/Java东西,并试图随着进展来弄清楚事情。迄今为止,我找到的教程网站无法解决我的问题,因此发布了这篇文章。
更多背景信息:我正在使用jondesign(Jonathan Schemoul)的"smoothgallery" script,并试图使其符合我的意愿,但如果您不知道它的实际工作方式,那将非常困难。我实现脚本的站点可以在这里找到。
以下是更改悬停时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;
}
这个 CSS 文件中的条目更改了该 div 内部 h3 的设置。
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3{
margin: 0;
padding: 0;
font-size: 12px;
font-weight: normal;
}
您可能还想查看创建这些类的.js文件,可以在此处找到。
这里可能是最重要的部分:
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');
},
我的问题是,是否可能通过使用主div的hover功能来更改h3和p的设置?
提前感谢!对于负面批评,我不知道我是否在发布这个问题的方式上犯了错误,甚至不知道我是否可以在这里提问。