Bei js für parent ein child ausschliessen

rernanded

rernanded

Erfahrenes Mitglied
Moin!
Mein Problem: Ich möchte, dass h1 (id="hhh") nicht unsichtbar/transparent wird.
MONI



HTML: 
<script>
function changedivintro() {
    document.getElementById('intro').style.opacity = 0.0;
}
function changedivintroback() {
    document.getElementById('intro').style.opacity = 1.0;
}
</script>


<div id="intro">
           <div id="main-text-teaser-seite-1">
                  <a href="seite-1a.php" target="_self" style="text-decoration: none;">
                         <div style="padding: 13px 13px 13px 13px; background-color: #FFF; border-radius: 10px; cursor: pointer;">
                               <h1 id="hhh" style="color: #000099; text-align: center;" onmouseover="changedivintro()" onmouseout="changedivintroback()">Hier geht's weiter.</h1>
                         </div>
                 </a>
<br />
<strong>DATENSCHUTZ-HINWEIS</strong>
<br />
Wenn Sie den "Hier geht's weiter."-Button anklicken und auf die Titelseite von ... gelangen, werden automatisch bereits durch die Einbettung von Videos von Fremdanbietern - wie z.B. von YouTube oder Vimeo - Daten von Ihnen(z.B. die IP-Nummer) an diese Anbieter übertragen.
            </div>
</div>
 
Zuletzt bearbeitet:
Wenn ich das denke, was du vorhaben könntest, würde ich das JS ganz entsorgen und das nur mit CSS machen
Code: 
<style>
  #hhh{
    color: #000099;
    text-align: center;
    padding: 13px 13px 13px 13px;
    background: #FFF;
    border-radius: 10px;
    cursor: pointer;
  }
  #hhh:hover ~ #hin{
    display:none;
  }
</style>
<h1 id="hhh"><a href="seite-1a.php" target="_self" style="text-decoration: none;">Hier geht's weiter. </a></h1>
<div id="hin">
<h4>DATENSCHUTZ-HINWEIS</h4>
Wenn Sie den "Hier geht's weiter."-Button anklicken und auf die Titelseite von ... gelangen, werden automatisch bereits durch die Einbettung von Videos von Fremdanbietern - wie z.B. von YouTube oder Vimeo - Daten von Ihnen(z.B. die IP-Nummer) an diese Anbieter übertragen.
</div>
Und lass das Inline-style weg , das macht alles unübersichtlicher und unnötig kompliziert.
Man brauch dafür auch viel mehr Code als wenn man das ganz normal ohne den Inline Quatsch macht
 
@basti1012
Das Problem:
Ein mouseover des h1#hhh erzeugt eine 100%ige Transparenz des gesamten div#intro (=parent) indem sich u.a. auch das h1#hhh(=child) befindet.
Das bedeutet, auch h1#hhh wird 100%ig transparent. Soll es aber nicht.
MONI
 
Was ist mit den code aus #3 , reicht das nicht?
Hier ein Codepen
Link zur Lösung

Falls die Containerstruktur nicht geändert werden darf, dann sag Bescheid , dann gibt es auch andere Lösungen
 
Zuletzt bearbeitet:
@basti1012
Deine Lösung bedeutet nur, dass ich per :hover des einen elements ein anderes ändere.
Beide elemente stehen aber bei Dir in keinem Zusammenhang und bedingen ansonsten einander nicht.

Wende doch bitte mal Deine Lösung auf meine Struktur an, ich weiß nämlich nicht wie.

MONI
 
Verstehe nur Bahnhof.
Ich frage mal anders.
Kannst du das HTML ändern, so wie ich es habe?
Oder zumindest etwas anders ändern?
Wenn ja, dann mach es doch wie ich es gemacht habe, da kommt das gleiche raus, was du vorhast.

So wie dein HTML gerade ist, kann man keine pure CSS Lösung nutzen.
Selbst eine JS Lösung kann nicht gehen. Du kannst das Parent Element ja nicht unsichtbar machen, ohne dass die Kinder auch verschwinden.

Zumindest habe ich keine Ahnung wie das gehen sollte.

Man könnte noch das A Element hovern und dann mit Nachbar Klasse den Text verschwinden lassen, dazu müsste der Text aber vorher noch in ein Element gepackt werden.

Kurz gesagt:
Ohne dein HTML zu ändern, sollte jetzt gar nichts von beiden klappen. Kann aber auch sein das ich gerade was übersehen habe.
 
Ich sehe das genau so wie Basti, kann keine Möglichkeit erkennen, den Text anzusprechen, wenn er nicht in einem Container steht.
Dachte zunächst an so etwas:
document.querySelectorAll('#intro>#main-text-teaser-seite-1>*:not(a)');
aber dabei wird der Textnode leider nicht einbezogen.
Warum kannst Du denn das HTML nicht ändern?
Ein, wenn auch unschöner, Ausweg wäre noch, das HTML mit Javascript umzuändern:
Code: 
    <div id="intro">
        <div id="main-text-teaser-seite-1">
            <a href="seite-1a.php" target="_self" style="text-decoration: none;">
                <div
                    style="padding: 13px 13px 13px 13px; background-color: #FFF; border-radius: 10px; cursor: pointer;">
                    <h1 id="hhh" style="color: #000099; text-align: center;" onmouseover="changedivintro(0)"
                        onmouseout="changedivintro(1)">Hier geht's weiter.</h1>
                </div>
            </a>
            <br />
            <strong>DATENSCHUTZ-HINWEIS</strong>
            <br />
            Wenn Sie den "Hier geht's weiter."-Button anklicken und auf die Titelseite von ... gelangen, werden
            automatisch
            bereits durch die Einbettung von Videos von Fremdanbietern - wie z.B. von YouTube oder Vimeo - Daten von
            Ihnen(z.B. die IP-Nummer) an diese Anbieter übertragen.
        </div>
    </div>
    <script>
        const cont = document.querySelector('#intro');
        let html = cont.innerHTML;
        html = html.replace(/(^.*<br>)(.*)(<\/div>)/s, '$1<span>$2</span>$3');
        cont.innerHTML = html;
        console.log(html)
        const nodesToModify = document.querySelectorAll('#intro>#main-text-teaser-seite-1>*:not(a)');
        console.log(nodesToModify);
        function changedivintro(val) {
            nodesToModify.forEach(item => {
                item.style.opacity = val;
            });
        }
    </script>
 
Zuletzt bearbeitet:
Ich musste noch mal Googeln ob man Textnode irgendwie ansprechen kann, habe aber nichts gefunden was wirklich läuft.

Mann könnte noch mit before und after arbeiten
HTML: 
<style>
#hhh{
    color: #000099;
    text-align: center;
}
#intro a{
    text-decoration: none;
}
strong{
    width:100%;
    display:block;
}
strong:after{
  content:'Wenn Sie den "Hier gehts weiter."-Button anklicken und auf die Titelseite von ... gelangen, werden automatisch bereits durch die Einbettung von Videos von Fremdanbietern - wie z.B. von YouTube oder Vimeo - Daten von Ihnen(z.B. die IP-Nummer) an diese Anbieter übertragen.';
  font-weight:100;
}
#main-text-teaser-seite-1:hover > strong{
  display:none;
}
</style>
<div id="intro">
     <div id="main-text-teaser-seite-1">
          <a href="seite-1a.php" target="_self">
           <div>
             <h1 id="hhh">Hier geht's weiter.</h1>
           </div>
          </a>
<strong>DATENSCHUTZ-HINWEIS<br></strong>
            </div>
</div>
Da aber das HTML nicht änderbar ist, fällt der Weg auch flach.
Die Lösung aus 9# ist wahrscheinlich auch der ein zigste Weg der Funktioniert in diesen Fall.
Auf der Idee bin ich heute Nacht auch nicht gekommen.

@rernanded , dein Link aus #8 bring uns bei diesem Problem , glaube ich auch nicht weiter.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück