CSS/JS-Lösung: On-hover-Kind-element, ändern übergeordneten div

Ich weiß, CSS ("cascading"), aber in diesem Fall möchte ich den Effekt, um aufzusteigen. Ich bin offen für entweder eine JS-oder CSS-Lösung, aber ehrlich gesagt würde ich lieber die Lösung mit der geringsten Menge von code oder an der Decke.

Wenn ich den Mauszeiger über einen (Kinder -) Brief, ich will das gesamte Hintergrundfarbe zu ändern, für das GESAMTE FENSTER, nicht nur das child-element. Jeder Buchstabe ist in das übergeordnete #word div füllt das gesamte Fenster (oder Körper).

Wäre es schön, wenn so etwas wie die unten existiert in css -:

#h:hover #word{
    background-color: rgba(0, 102, 0, .5);
}

Aber es funktioniert nicht. Jemand irgendwelche Ideen??

HTML:

<div id="word">
    <h1><a id="h" class= "letter" href=#>H</a></h1>
    <h1><a class= "letter" href=#>E</a></h1>
    <h1><a class= "letter" href=#>L</a></h1>
    <h1><a class= "letter" href=#>L</a></h1>
    <h1><a class= "letter" href=#>O</a></h1>
</div>

CSS:

    body {
        /*font-family: 'Sigmar One', cursive;*/
        font-family: 'Chango', cursive;
        font-size: 115px;
        color: white;
        text-shadow: 5px 5px 5px #000;
        /* background-color: #0047b2 */
        width: 100%;
        height: 100%;
        margin: 0px;
        background: url(img/texture.png) repeat; 

    }

    #word {
        position:absolute; 
        height:100%; 
        width: 70%;
        display: table;
        padding: 0 15% 0 15%;
        background: rgba(0, 71, 178, .5);
    }

    h1 {
        display: table-cell;
        vertical-align: middle;
        text-align:center;
        height: 1em;

    }

    a {
        /*border: 1px solid black;*/
        display: inline-block;
        line-height: 100%;
        overflow: hidden;

    }

    a:visited, a:active {
        text-decoration: none;
        color: white;
        /*color: #E8E8E8;*/

    }

    a:link {
        text-decoration: none;
        color: white;
        text-shadow: 3px -3px 0px black, -2px 2px 5px #0056b2;

    }

    a:hover {
        text-shadow: 5px 5px 5px #000;
        color: white;
    }

    #h:hover #word{
        background-color: rgba(0, 102, 0, .5);
    }

    @media (max-width: 1330px){
        #word {
            width: 100%;
            padding: 0px;

        }
    }

Fiddle: http://jsfiddle.net/SZ9ku/1/

Was ist mit diesem: stackoverflow.com/questions/8114657/...

InformationsquelleAutor Keven | 2013-09-01

1

Die Lösung wäre wahrscheinlich JS:
```
$(".letter").hover(function() {
    $(this).closest("#word").toggleClass("hovered")
});
```
Hier ist ein Turnschuh: http://jsfiddle.net/zT9AS/2

Ich bemerkte Sie nahm sich den rest von meinem CSS in Ihrem Turnschuh. Ich habe versucht das JS aus, aber es scheint nicht zu funktionieren. Etwas lässt mich denken, dass eine andere CSS-Regel ist in Unordnung, was sich für mich.
In Ordnung, versuchen Sie dies: jsfiddle.net/zT9AS/2 dies ist mit dem css. Das problem war ich hatte meine .hovered zu #word.hovered und unter #word ich geändert background zu background-color als der ehemalige oberste Priorität sonst.
Ja, das ist die beste Lösung. Es erlaubt mir zu schreiben eine Zeile JS-code (wenn auch, JQuery-code...) und dann lassen Sie das styling bis zum CSS. Danke!

InformationsquelleAutor ced-b
0

True;
```
#word #h:hover {
    background-color: rgba(0, 102, 0, .5); 
}
```
False;
```
#h:hover #word{
    background-color: rgba(0, 102, 0, .5);
}
```
Ich möchte den Effekt, dass false gibt, nicht die Wirkung, die wahre gibt. Die erste wird sich erst ändern, die Hintergrundfarbe des jeweiligen Elements. Ich brauche das ganze Fenster, um Farbe zu ändern.

InformationsquelleAutor bykrkc

Ohne eine jquery Lösung:

onload = function()
{
  var links = document.getElementsByTagName('a');
  for (var i = 0; i < links.length; ++i)
  {
    if (links[i].className == 'letter')
    {
      links[i].onmouseover = function() {
        document.getElementById('word').style.backgroundColor="#0000FF";
      };
      links[i].onmouseout = function() {
        document.getElementById('word').style.backgroundColor="#FFFFFF";
      };
    }
  }
}

InformationsquelleAutor Casimir et Hippolyte

Es kann getan werden, in reiner JS, keine jQuery (ich nehme an, Sie wollen nicht, denn es wäre nicht das Licht im code), dies ist die beste, die ich konnte, das kam bei raus:

var word = document.getElementsByClassName("letter");
for (i=0; i<word.length; i++) {
  word[i].addEventListener("mouseenter", function( event ) {
    parent = event.target.parentNode.parentNode;
    //whenever the mouse hovers over a letter this will be evaluated once 
    parent.style.backgroundColor = "green";
  });
  word[i].addEventListener("mouseout", function( event ) {
    parent = event.target.parentNode.parentNode;
    //whenever the mouse hovers over a letter this will be evaluated once 
    parent.style.backgroundColor = "";
  });
}

Versuchen Sie es in diesem fiddle: http://jsfiddle.net/SZ9ku/17/

InformationsquelleAutor davidaam

In POJS, fügen Sie den folgenden

CSS

.wordBg {
    background: rgba(0, 102, 0, .5) !important;
}

Javascript

var changeWordBg = (function (word) {
    return function (evt) {
        if (evt.target.classList.contains("letter")) {
            switch (evt.type) {
                case "mouseover":
                    word.classList.add("wordBg");
                    break;
                case "mouseout":
                    word.classList.remove("wordBg");
                    break;
                default:
            }
        }
    };
}(document.getElementById("word")));

document.body.addEventListener("mouseover", changeWordBg, false);
document.body.addEventListener("mouseout", changeWordBg, false);

Auf jsfiddle

InformationsquelleAutor Xotic750

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.