.click .mouseover .mousout combined - cssはしません（子ではありません）？

Question

短い質問：私はこの作業を取得カント： ">" & "+"

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

文句を言わない仕事のような

$(".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のソリューションは、どのようにそのない兄弟や子供

を引き起こします私はそれを修正することはできますか？

私のhtmlのようなある：ここ

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

は、私はそれが仕事を得るカント私のsnippitです： 多分あなたはどんな提案を持っている：

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

hrefハイパーリンクに欠けていた。 .wrapperに位置が割り当てられておらず、jQueryスクリプトにエラーがありました。

ところで、.closeは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

それは私のために仕事をdoesntのか、どこで間違っていますか？

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