Utilisez passez la souris sur les div à changer tous les éléments à l'intérieur de div
Mes excuses à l'avance, car cela semble être un problème concernant la compréhension de base de CSS et peut-être aussi Javascript.
Ce que je veux faire, c'est ceci: imaginez un div qui contient un h3 et un p. Sur planant sur la div, j'aimerais que le h3 et p pour changer leur police-poids. Jusqu'à présent, je suis en utilisant ce code ici pour modifier l'opacité et de la frontière sur le planant au-dessus de la div, mais je ne sais vraiment pas comment je peux consulter les deux éléments à l'intérieur de la div. Je suis vraiment désolé, mais j'ai besoin de quelqu'un pour me l'expliquer en des termes très simples.
Par exemple, je pense que ces éléments à l'intérieur de la div sont appelés les enfants, mais je ne suis même pas sûr... je suis vraiment travailler avec tout ce que HTML/CSS/Java trucs pour la première fois et essayer de comprendre les choses comme je vais le long. Le tutoriel sites que j'ai trouvé jusqu'à présent ne pouvait pas résoudre mon problème, donc ce post.
Plus d'informations de fond: je suis en utilisant le "smoothgallery" script par jondesign (Jonathan Schemoul) () et j'essaie de le plier à ma volonté, mais c'est assez difficile si vous n'avez pas la moindre idée de comment cela fonctionne réellement. Le site j'ai mis en place le script peut être trouvé ici.
Voici le CSS de la partie qui modifie la div sur le vol stationnaire:
.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;
}
Cette entrée dans le fichier CSS modifie les paramètres concernant par exemple le h3 intérieur de ce div,
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3{
margin: 0;
padding: 0;
font-size: 12px;
font-weight: normal;
}
Vous pouvez également prendre un coup d'oeil à l' .fichier js qui fait de ces classes, il peut être trouvé ici.
C'est probablement la partie la plus importante ici:
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');
},
Donc ma question est de savoir si il est possible de changer le h3 et p paramètres à l'aide de la fonction hover sur la div principale?
Merci d'avance! Aussi pour les critiques négatives, je ne sais pas vraiment si j'ai fait quelque chose de mal dans la façon dont j'ai posté cette question et si je peux même demander ici.
OriginalL'auteur Thomas | 2011-04-03
Vous devez vous connecter pour publier un commentaire.
Vous faites de cette façon, plus compliqué qu'il doit être. Pas de Javascript est requis pour ce faire. Disons que vous avez reçu les éléments suivants:
Donc, vous avez un conteneur, avec un en-tête et le paragraphe. Disons que vous voulez avoir l'en-tête poids normal, et le paragraphe en rouge normalement, avec un collier de boîte autour de l'ensemble de la chose. Ici sont vos styles:
Lorsque vous placez le pointeur de la souris sur l' , vous voulez le paragraphe et d'en-tête en gras et de la zone de frontière pour changer du bleu. Ajouter ceci dans votre feuille de style (ou
<style>
bloc) ci-dessous le CSS ci-dessus:Notez que vous pouvez économiser un peu d'espace, et de le rendre plus concis en combinant les
<h3>
et<p>
styles en une seule ligne avec une virgule, car ils sont tous les deux la même chose. Le tout serait maintenant ressembler à ceci:Rappelez-vous que le "C" dans "CSS" signifie "en cascade": styles en cascade vers le bas à travers les deux hiérarchies (qui est un parent de l'élément de style s'applique également à un élément enfant, sauf s'il a des styles par défaut comme les marges ou quoi que ce soit), et en bas de la feuille de style - qui signifie que les styles que vous définissez après d'autres vont les remplacer si elles s'appliquent à un même élément.
": Hover" sélecteur CSS pouvez très bien être utilisé sur n'importe quoi, à de très rares exceptions. Je les utilise régulièrement pour Javascript libre de menus déroulants. Vous pouvez en savoir plus sur l' ":hover" sélecteur CSS ici: W3Schools CSS référence ":hover". En fait, la Site W3Schools est généralement une grande ressource pour le brossage de votre CSS.
Aha! Oui, c'était l'invite pour mon explication de l' :placez le sélecteur CSS. Content que ça vous a mise dans la bonne direction, alors! Quand il s'agit de choses difficiles à trouver le DOM de nidification de la position de certains éléments, je ne peux pas le recommander assez d'outils comme Firebug et Web Developer Toolbar pour Firefox. Les deux vous permettent d'inspecter les éléments en plaçant le curseur au-dessus d'eux, et ils vont vous montrer à la fois où ces éléments sont, et l'efficacité de styles CSS. Firebug sera également vous montrer précisément comment ceux en vigueur styles ont été calculées, et comment ils en cascade vers le bas à travers les feuilles de style CSS inestimable.
Grande réponse. Merci.
OriginalL'auteur Richard K.