Verwenden Sie bewegen Sie den Mauszeiger auf div zu ändern, dass alle Elemente innerhalb dieses div

Meine Entschuldigungen im Voraus, da dies scheint ein problem, was sehr grundlegendes Verständnis von CSS und vielleicht noch Javascript.

Was ich tun will, ist dies: stellen Sie sich ein div, welches eine h3 und eine p. Wenn Sie den Mauszeiger auf dem div möchte ich die h3 und p ändern Ihre schriftart-Gewicht. Bisher bin ich mit diesem code hier ändern Sie die Deckkraft und der Grenze der Maus über das div, aber ich weiß wirklich nicht, wie kann ich verweisen auf die beiden Elemente innerhalb des div. Ich bin wirklich Leid, aber ich brauche jemanden der es mir erklären, in sehr einfachen Worten.

Zum Beispiel, ich denke, diese Elemente innerhalb des div-werden Kinder genannt, aber ich bin mir auch nicht sicher... ich bin wirklich mit allem, was HTML/CSS/Java-Dinge für die erste Zeit und versuchen, Dinge herauszufinden, wie ich gehen zusammen. Die tutorial-Seiten, die ich bisher gefunden konnte nicht mein problem lösen, daher dieser post.

Mehr hintergrund Informationen: ich bin mit dem "smoothgallery" Skript durch jondesign ' (Jonathan Schemoul) () und versuche es biegen meinen Willen, aber das ist ziemlich schwierig, wenn Sie haben noch keine Ahnung, wie es tatsächlich funktioniert. Die Website implementiert habe ich das Skript gefunden werden kann hier.

Hier kommt der CSS-Teil, dass die änderungen der div auf hover:

.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;
}

Dieser Eintrag in der CSS-Datei ändert die Einstellungen für z.B. die h3-innen, div,

.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3{
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-weight: normal;
}

Möglicherweise möchten Sie auch zu schauen .js-Datei, die diese Klassen, es kann gefunden werden hier.

Dies ist wahrscheinlich der wichtigste Teil hier:

    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');
    },

Also meine Frage hier ist, ob es überhaupt möglich ist, zu ändern, h3 und p-Einstellungen mithilfe der hover-Funktion auf den main-div?

Vielen Dank im Voraus! Auch für negative Kritik, ich weiß wirklich nicht, ob ich etwas falsch gemacht in der Weise, die ich stellte diese Frage, und wenn ich kann sogar Fragen es hier.

InformationsquelleAutor Thomas | 2011-04-03

23

Du machst diese Weise komplizierter als es sein muss. Kein Javascript erforderlich ist, dies zu tun. Sagen wir du hast die folgenden:
```
<div class="container">
    <h3>This is a header</h3>
    <p>This is a paragraph</p>
</div>
```
Also du hast einen container, mit Kopf und Absatz. Lassen Sie uns sagen, Sie wollen die Kopfzeile normal Gewicht, und der Absatz in rot normalerweise mit einer gepolsterten box um die ganze Sache. Hier sind Ihre Stile:
```
.container { border:1px solid black; padding:10px; }
.container h3 { font-weight:normal; }
.container p { color:red; }
```
Wenn Sie den Mauszeiger über die , die Sie wollen, dass die Absatz-und Kopfzeile in Fettdruck und das Feld Grenze, zu ändern, zu blau. Fügen Sie diese in Ihr stylesheet (oder <style> block) unten das CSS oben:
```
.container:hover { border-color:blue; }
.container:hover h3 { font-weight:bold; }
.container:hover p { font-weight:bold; }
```
Beachten Sie, dass Sie sparen ein wenig Platz, und machen es mehr präzise durch die Kombination der <h3> und <p> Stile in einer Zeile mit einem Komma, da Sie beide die gleiche ist. Das ganze würde jetzt so Aussehen:
```
.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; }
```
Denken Sie daran, dass das "C" in "CSS" steht für cascading": Stile Kaskade nach unten über die beiden Hierarchien (das heißt, dass ein übergeordnetes element, das den Stil betrifft auch ein child-element hat, es sei denn, es hat die Standard-Stile wie Seitenränder oder was auch immer), und unten die style-sheet - das bedeutet, dass Formate, die Sie definieren, nachdem andere diese überschrieben, wenn Sie beziehen sich auf das gleiche element.

Den ":hover" - Selektor in CSS kann ziemlich viel verwendet werden, auf etwas, mit sehr wenigen Ausnahmen. Ich benutze Sie regelmäßig für Javascript-free drop-down-Menüs. Finden Sie mehr über den ":hover" CSS-Selektor-hier: W3Schools CSS-Referenz auf ":hover". In der Tat, die W3Schools-Website im Allgemeinen eine großartige Ressource für Bürsten bis CSS.
- Naja, deine Antwort hat mir geholfen. Aber indirekt. Ich habe bemerkt, dass in meiner CSS-Datei, die es wirklich gesagt hat div.zu schweben, und nicht div:hover. Mein Hauptproblem war nur, dass ich nicht weiß, wie kann ich die Adresse bestimmten sub-Elemente. Ich weiß gar nicht, wie zu sagen, dass. Ich meine, ich weiß, dass body {} ändert sich alles für den tag "Körper", aber wenn es um die Bewältigung einer einzigen h3-versteckt in einer viel höheren Rang Elementen, bekam ich ein wenig verloren. Wie gesagt, ich bin nur herauszufinden, was, wie ich entlang gehen, und versuche den Sinn von einigen Seiten und Skripts, die jemand anderes geschrieben hat. Jetzt bleibt nur noch zu sagen: Danke!!!!
- Aha! Ja, das war die Aufforderung für meine Erklärung, in der die :hover-CSS-Selektor. Froh, es hat Sie in die richtige Richtung, dann! Wenn es um knifflige Sachen wie das finden der DOM Verschachtelung position von bestimmten Elementen, ich kann nicht genug empfehlen-tools wie Firebug und Web Developer Toolbar für Firefox. Sie können prüfen Elemente von schweben Sie den cursor über Sie, und Sie werden Ihnen zeigen, wo diese Elemente sind, und die effektive CSS-Stile. Firebug wird auch zeigen Ihnen genau, wie diese effektive Stile wurden berechnet, und wie Sie kaskadiert unten durch CSS - von unschätzbarem Wert.
- Tolle Antwort. Danke.
InformationsquelleAutor Richard K.

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.