# Bei js für parent ein child ausschliessen



## rernanded (8. Oktober 2021)

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




```
<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>
```


----------



## basti1012 (8. Oktober 2021)

He was?
Verstehe nicht, was du möchtest.
Lösch das Script , dann bleibt auch alles da


----------



## basti1012 (8. Oktober 2021)

Wenn ich das denke, was du vorhaben könntest, würde ich das JS ganz entsorgen und das nur mit CSS machen

```
<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


----------



## rernanded (8. Oktober 2021)

@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


----------



## basti1012 (9. Oktober 2021)

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


----------



## rernanded (9. Oktober 2021)

@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


----------



## basti1012 (9. Oktober 2021)

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.


----------



## rernanded (9. Oktober 2021)

HTML ändern? Nein.
Vllt. gibt es hier einen Anhaltspunkt:
Tryit Editor v3.7
Ich weiß nur nicht wie ich das bei meinem Code anwenden soll.
MONI


----------



## Sempervivum (9. Oktober 2021)

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:

```
<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>
```


----------



## basti1012 (9. Oktober 2021)

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

```
<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.


----------



## rernanded (9. Oktober 2021)

Ändern ist deshalb problematisch weil der Code nicht von mir ist und eingebunden und ... dann gibts wieder Trara und und und Hin und Her usw.
Ich werde aber, weil ich die Probleme die Ihr schildert erkenne, mal etwas versuchen was einen Mittelweg darstellt und komme auf Euch zurück.

Ich muß auf jeden Fall die h1 so positionieren, dass sie an der Stelle bleibt an der sie sich befindet wenn sie im Container eingebunden ist. Das Problem ist, unter/hinter dem Container befindet sich ein Foto (body - background) und wenn der Container unsichtbar gemacht wird sieht man erst wesentliche Teile des Fotos. Die h1 muß aber erhalten bleiben weil sie -quasi als Button- zur nächsten Seite verlinkt.

Man erkennt als user zwar noch den pointer, aber das sieht ohne h1="Button" auf dem Foto nicht gut aus.

Meine Idee war zuerst das "Hier geht's weiter." in das Foto direkt einzubauen, z.B. als ein gesprayter Schriftzug. Der muß dann aber vom Container verdeckt werden. Mal sehen.    

MONI


----------



## basti1012 (9. Oktober 2021)

Hast du mal ein Link zu der Seite?
Dann kann man mal schauen, ob  es eine andere Lösung gibt.

Optimal wäre das HTML zu ändern , auch wenn es nur ein <p> um den Text ist der ausgeblendet werden soll.

Es würde reichen, wenn dein HTML so aussehen würde

```
<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</strong>
<p>
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.</p>
            </div>
</div>
```
Dein Inline-style solltest du dir auch abgewöhnen , das ist nicht mehr aktuell, das so zu nutzen.


----------

