.click .mouseover .mousout combined - css不會做（不是孩子）？

-1

短的問題：我不能得到這個工作：.click .mouseover .mousout combined - css不會做（不是孩子）？

$(".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解決方案

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

不會工作，導致它不是一個兄弟姐妹或子女

如何我可以修復它嗎？

我的HTML是這樣的：

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

這裏是我的這段哪裏我不能得到它的工作：也許你有什麼建議：

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

來源

2017-07-19 Christian Bär

的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>

來源

2017-07-19 12:16:11 Gerard

我的問題，增加了一個片段，你的回答只能懸停不適用於點擊 –

的點擊工作正常（類被添加和刪除），但結果是一樣的懸停。更改.wrapper-view {left：50％}，您將看到不同之處。 – Gerard

mhhh ...在我的代碼片段中它不起作用，或者我錯在哪裏？當我點擊工作按鈕時，它不移動到位置左側：50％ –

它不工作對我來說，或者我錯了？

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

來源

2017-07-19 13:30:52

.click .mouseover .mousout combined - css不會做（不是孩子）？

回答

相關問題