.click .mouseover .mousout combined - css macht es nicht (nicht Kind)?

Question

Kurze Frage: I Cant diese an der Arbeit:

$(".work").click(function(){ 
     $(".wrapper").toggleClass("wrapper-view"); 
     $(".content").toggleClass("content-view");}) 
      .mouseover(function(){ 
     $(".wrapper").css("left", "90%"); 
     $(".close").css("right", "0%"); 
    })  .mouseout(function(){ 
     $(".wrapper").css("left", "95%"); 
     $(".close").css("right", "-5%"); 
    }); 

CSS-Lösung wie ">" & "+"

.work:hover > .wrapper { left: 95%; } 

nicht funktioniert sein nicht ein Geschwister oder Kind verursacht

wie kann ich es reparieren?

mein html ist wie:

<div class="wrapper">... some content...</div> 
<div class="cv"> 
<div class="nav"> 
<a class="work">Work</a> 
</div> 
</div> 

hier mein snippit ist, wo ich kann es nicht die Arbeit zu: Vielleicht haben Sie irgendwelche Vorschläge:

$(".work").click(function() { 
 
    $(".wrapper").toggleClass("wrapper-view"); 
 
    $(".content").toggleClass("content-view"); 
 
}); 
 
$(".work").mouseover(function() { 
 
    $(".wrapper").css("left", "90%"); 
 
    $(".close").css("right", "0%"); 
 
}).mouseout(function() { 
 
    $(".wrapper").css("left", "95%"); 
 
    $(".close").css("right", "-5%"); 
 
});

.wrapper{ 
 
top:0; 
 
left:200px; 
 
width: 400px; 
 
height: 400px; 
 
background-color:#f4f4f4; 
 
border: 1px solid black; 
 
padding: 0; 
 
margin: 0; 
 
position: relative; 
 
z-index:2; 
 
} 
 
.wrapper-view{left:95%} 
 
.cv{ 
 
top:0; 
 
left:0; 
 
width: 400px; 
 
height: 400px; 
 
background-color:blue; 
 
border: 1px solid black; 
 
padding: 0; 
 
margin: 0; 
 
position: absolute; 
 
} 
 
a{ color: white}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper wrapper-view">... some content...</div> 
 
<div class="cv"> 
 
    <div class="nav"> 
 
    <a class="work" href="#">Work</a> 
 
    </div> 
 
</div>

Answer 1

Die href fehlte für den Hyperlink. .wrapper wurde keine Position zugewiesen und es gab einen Fehler in Ihrem jQuery-Skript.

Übrigens, .close wird nicht im HTML verwendet.

$(".work").click(function() { 
 
    $(".wrapper").toggleClass("wrapper-view"); 
 
    $(".content").toggleClass("content-view"); 
 
}); 
 
$(".work").mouseover(function() { 
 
    $(".wrapper").css("left", "90%"); 
 
    $(".close").css("right", "0%"); 
 
}).mouseout(function() { 
 
    $(".wrapper").css("left", "95%"); 
 
    $(".close").css("right", "-5%"); 
 
});

.wrapper, .close { 
 
    position: relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper">... some content...</div> 
 
<div class="cv"> 
 
    <div class="nav"> 
 
    <a class="work" href="#">Work</a> 
 
    </div> 
 
</div>

Answer 2

spielt es keine Arbeit für mich, oder wo bin ich falsch?

$(".work").click(function() { 
 
    $(".wrapper").toggleClass("wrapper-view"); 
 
    $(".content").toggleClass("content-view"); 
 
}); 
 
$(".work").mouseover(function() { 
 
    $(".wrapper").css("left", "90%"); 
 
    $(".close").css("right", "0%"); 
 
}).mouseout(function() { 
 
    $(".wrapper").css("left", "95%"); 
 
    $(".close").css("right", "-5%"); 
 
});

.wrapper{ 
 
top:0; 
 
left:50%; 
 
width: 400px; 
 
height: 400px; 
 
background-color:#f4f4f4; 
 
border: 1px solid black; 
 
padding: 0; 
 
margin: 0; 
 
position: relative; 
 
z-index:2; 
 
} 
 
.wrapper-view{left:95%} 
 
.cv{ 
 
top:0; 
 
left:0; 
 
width: 400px; 
 
height: 400px; 
 
background-color:blue; 
 
border: 1px solid black; 
 
padding: 0; 
 
margin: 0; 
 
position: absolute; 
 
} 
 
a{ color: white}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper wrapper-view">... some content...</div> 
 
<div class="cv"> 
 
    <div class="nav"> 
 
    <a class="work" href="#">Work</a> 
 
    </div> 
 
</div>