Ändern der Eigenschaft eines Elements bei Hover eines anderen Elements

Ich habe zwei verschiedene divs, bei Hover von einem div versuche ich die Eigenschaft (box-shadow) dieses div + anderen div zu ändern. d. h. im folgenden Beispiel sollte bei Hover von div one-two sowohl one-two als auch one-one box-shadow hinzugefügt werden.Ändern der Eigenschaft eines Elements bei Hover eines anderen Elements

Ich habe eine Antwort in Stackoverflow gefunden, die .div1: Hover + .div2, aber das scheint nicht zu funktionieren. (Is there any way to hover over one element and affect a different element?). Gibt es eine andere Lösung oder mache ich etwas falsch?

@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300); 
 
.container { 
 
    display: block; 
 
    max-width: 100%; 
 
} 
 
.header { 
 
    width: 100%; 
 
    position: absolute;; 
 
    /*border-bottom: 1px solid black;*/ 
 
    height: 10%; 
 
    background-color: teal; 
 
    margin: -9px; 
 
    padding-top: 15px; 
 
    box-shadow: 2px 5px 4px #ccc ; 
 
    text-align: center; 
 
    font-size: 20px; 
 
    text-transform: uppercase; 
 
    font-family: sans-serif; 
 
    font: Helvetica; 
 
    color: #ccc 
 

 
} 
 
.canvas-frame { 
 
    position: absolute; 
 
    left: 30%; 
 
    top: 20%; 
 
    width: 600px; 
 
    height: 400px; 
 
    background: linear-gradient(to left bottom, #2DBE60, #246DE9); 
 
    box-shadow: 3px 3px 5px 2px #ccc; 
 
} 
 
.frame { 
 
    position: absolute; 
 
    left: 30%; 
 
    top: 20%; 
 
    width: 600px; 
 
    height: 400px; 
 
    background: linear-gradient(to left bottom, #2DBE60, #246DE9); 
 
    box-shadow: 3px 3px 5px 2px #ccc; 
 
} 
 
.one-one { 
 
    position: absolute; 
 
    z-index: 0; 
 
    top: 0; 
 
    left: 36px; 
 
    height: 40px; 
 
    width: 20px; 
 
    background: #fff; 
 
    margin-top:30px; 
 
    border-radius: 3px; 
 
    transform: rotate(50deg); 
 
    box-shadow: 0 0 13px 0 rgba(0,0,0,0.2); 
 
} 
 
.one-two { 
 
    position: absolute; 
 
    background: #fff; 
 
    height: 100px; 
 
    width: 20px; 
 
    border-radius: 3px; 
 
    margin-top : -20px; 
 
    top: 51px; 
 
    left: 51px; 
 
    z-index: 1; 
 
    box-shadow: 0 0 13px 0 rgba(0,0,0,0.2); 
 
} 
 
.zero-one,.zero-two { 
 
    position: absolute; 
 
    z-index: 2; 
 
    top: 50; 
 
    left: 62px ; 
 
    box-sizing: border-box; 
 
    height: 100px; 
 
    width: 100px; 
 
    margin-top : 30px; 
 
    border-radius: 50%; 
 
    border: 24px solid #fff; 
 
    box-shadow: 0 0 13px 0 rgba(0,0,0,0.2); 
 
} 
 
.zero-two { 
 
    left: 152px !important; 
 
} 
 
.overlap-text { 
 
position: absolute; 
 
z-index: 1; 
 
} 
 
.big{ 
 
    font-family: sans-serif; 
 
    font: Helvetica; 
 
    font-size: 80px; 
 
    color: #fff; 
 
    text-transform: capitalize; 
 
} 
 
.days{ 
 
    position: absolute; 
 
    top: 90px; 
 
    left: 140px; 
 
} 
 
.one-two:hover + .one-one{ 
 
    box-shadow: 5px 5px 8px 0 #545050; 
 
    cursor: -webkit-grab; 
 
} 
 
.one-two:active{ 
 
    box-shadow: 6px 6px 4px 0 #545050; 
 
    cursor: -webkit-grab; 
 
} 
 
.one-two:hover + .one-one{ 
 
    box-shadow: 5px 5px 8px 0 #545050; 
 
    cursor: -webkit-grab; 
 
} 
 
.one-two:active{ 
 
    box-shadow: 6px 6px 4px 0 #545050; 
 
    cursor: -webkit-grab; 
 
}

<html> 
 
<title> 
 
100 days Challenge 
 
</title> 
 
<link rel="stylesheet" href="style.css"> 
 
<body> 
 
    <div class="container"> 
 
    <nav class="header"> css challenge </nav> 
 
    <div class="frame"> 
 
    <!-- <canvas class="canvas-frame"> --> 
 
    <!-- <h1 class="overlap-text"> 100 </h1> --> 
 
    <div class="one-one" id="one-one"></div> 
 
    <div class="one-two" id="one-two"></div> 
 
    <div class="zero-one"></div> 
 
    <div class="zero-two"></div> 
 
    <div class="days"><h1 class="big"> days </h1></div> 
 

 
    <!-- <h2> css challenge </h2> --> 
 
</div> 
 
<!-- </canvas> --> 
 
</div> 
 
</body> 
 
</html>

Quelle

2017-04-04 Aravind

Ändern Sie Ihre HTML-Versuchen. Platziere '.one-two' vor' .one-one' – Alex

Du verwendest den benachbarten Geschwisterselektor (+), der das Element selektiert, das * dem * hovered div folgt. In Ihrem Code versuchen Sie, das Element zu wählen, dem * das hovered div vorausgeht. Es gibt keinen Selektor, der das erreichen kann. –

@Alex Danke das hat funktioniert. – Aravind

Ja, so wollen Sie den benachbarten Selektor verwenden +

.one-one:hover + .one-two { box-shadow: 5px 5px 8px 0 #545050; }

Denken Sie es in der falschen Reihenfolge alle

Schauen Sie sich diese einfache codepen Beispiel taten: http://codepen.io/StefanBobrowski/pen/ZeZGmQ

Quelle

2017-04-04 20:03:36 StefanBob

Ja, das Ändern der Reihenfolge hat es funktioniert. Vielen Dank. – Aravind

Sie sind herzlich willkommen, froh, dass es Ihnen geholfen hat – StefanBob

Was denken Sie über wenig jquery Einfügen? können sagen, dass divs #a und div werden div #b so Eigenschaft b zu ändern, indem ein Schweben könnte wie folgt aussehen (ich nicht genau Beispiel gab haben Sie brauchen, aber dies könnte Ihnen helfen, zu verstehen, wie man das lösen könnte.)

$(function() { 
    $('#a').hover(function() { 
    $('#b').css('background-color', 'Gray'); 
    }, function() { 
    // on mouseout, reset the background colour 
    $('#b').css('background-color', ''); 
    }); 
});

Quelle

2017-04-04 20:02:36

dieser Struktur

<div class="container"> 
    <nav class="header"> css challenge </nav> 
    <div class="frame"> 
    <!-- <canvas class="canvas-frame"> --> 
    <!-- <h1 class="overlap-text"> 100 </h1> --> 
    <div class="one-two" id="one-two"></div> <!-- chnage the placement of div --> 
    <div class="one-one" id="one-one"></div> 
    <div class="zero-one"></div> 
    <div class="zero-two"></div> 
    <div class="days"><h1 class="big"> days </h1></div> 

    <!-- <h2> css challenge </h2> --> 
</div> 
<!-- </canvas> --> 
</div>

CSS

.one-two:hover ~ .one-one{ 
    box-shadow: 5px 5px 8px 0 #545050; 
    cursor: -webkit-grab; 
} 
.one-two:hover ~ .one-one{ 
    box-shadow: 5px 5px 8px 0 #545050; 
    cursor: -webkit-grab; 
}

jsfiddle link of your code

Quelle

2017-04-05 05:24:04 LKG

Ändern der Eigenschaft eines Elements bei Hover eines anderen Elements

Antwort

Verwandte Themen