ändern Sie den hintergrund des parent-div auf hover

Habe ich diesen code:

<div class="thumb_image_holder_orange">
    <img src="http://dummyimage.com/114x64/000/fff.png" />
</div>

Wird das Bild zentriert in der Mitte der div, wie kann ich die div-hintergrund wenn ich den Mauszeiger über das Bild bewegen?

Ich nur wissen, wie man ändern Sie das Bild-Eigenschaften, wenn ich die Maus über dem div.

Lieber nicht auf jQuery verwenden, aber nicht zu viel dagegen.

Dank!

Ist JS Antwort ist akzeptabel?
Nur bearbeitet meine Frage, würde es vorziehen, nicht zu, aber jQuery wird auf der Seite schon so nicht das Ende der Welt.
Schade, es gibt keinen parent-Selektor in CSS. (stackoverflow.com/questions/45004/...). Wenn Sie mit jQuery ist das kein problem der link, den ich gepostet möglicherweise ein Duplikat.
shakti ja, JS Antwort ist akzeptabel

InformationsquelleAutor 472084 | 2011-06-10

  1. 13

    Können Sie nicht. CSS keine Möglichkeit zu, wählen Sie die "parent-element":

    http://snook.ca/archives/html_and_css/css-parent-selectors

    Lieber nicht auf jQuery verwenden, aber
    nicht zu viel dagegen.

    Verwenden: http://jsfiddle.net/KHc6X/

    $('.thumb_image_holder_orange > img').hover(function(){
    $(this).parent().toggleClass('hover');
})
    Anerkannt für die Fähigkeit, entfernen Sie die hintergrund-auch das habe ich vergessen zu erwähnen. Danke.
    Du bist herzlich willkommen. Ich vermutete, Sie wollte es so, denn Sie wurden ursprünglich nach der Funktionalität von :hover von CSS.
    gute one-liner mit toggleClass anstelle von add/removeClass

    InformationsquelleAutor thirtydot

  2. 5

    CSS-Selektoren können nicht aufsteigen, so müssen Sie, JavaScript zu verwenden.

    Sie es markiert jquery so, hier ist ein jQuery-Antwort.

    $('.thumb_image_holder_orange img').mouseover(function() {
    $(this).parent().css('backgroundImage', 'url(/whatever/you/want.png)');
});

    InformationsquelleAutor alex

  3. 2

    Dem folgenden snippet sollte den job tun:

    $('.thumb_image_holder_orange > img').hover(function() {
    $(this).parent().css('background-color', '#f00');
});

    InformationsquelleAutor Kevin

  4. 2

    Können Sie nicht tun dies in CSS.

    Was über standard-JavaScript statt JQuery?

    <div class="thumb_image_holder_orange">
    <img src="http://dummyimage.com/114x64/000/fff.png" onmouseover="this.parentNode.style.backgroundColor = '#f00'" onmouseout="this.parentNode.style.backgroundColor = '#fff'" />
</div>

    InformationsquelleAutor Connell

  5. 1

    Wenn Sie können, fügen Sie eine dummy-element neben dem Bild, dann kann dies erfolgen, indem diese Reine CSS2-trick, was in dieses Beispiel fiddle.

    Markup:

    <div class="thumb_image_holder_orange">
    <div></div>
    <img src="http://dummyimage.com/114x64/000/fff.png" />
</div>

    Stylesheet:

    .thumb_image_holder_orange {
  background: orange;
  position: relative;
}
.thumb_image_holder_orange:hover {
  background: red;
}
.thumb_image_holder_orange div:hover {
  background: orange;
}
.thumb_image_holder_orange img {
  position: absolute;
}

    InformationsquelleAutor NGLN

Schreibe einen Kommentar