.click .mouseover .mousout combiné - css ne le fait pas (pas enfant)?

Question

petite question: Je ne peux pas obtenir cela fonctionne:

$(".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%"); 
    }); 

solution css comme ">" & "+"

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

ne fonctionnera pas causer son pas un frère ou un enfant

comment puis-je le réparer.

mon code HTML est comme:

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

ici est mon snippit où je ne peux pas le faire fonctionner: peut-être vous avez des suggestions:

$(".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

Le href était manquant pour le lien hypertexte. .wrapper n'a pas de position attribuée et il y a eu une erreur dans votre script jQuery. Par ailleurs, .close n'est pas utilisé dans le code HTML.

$(".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

il me doesnt travail, ou si je me trompe?

$(".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>