.click .mouseover .mouseout 组合 - css 不会这样做（不是孩子）？答案

【问题标题】：.click .mouseover .mousout combined - css wont do it (not child)?.click .mouseover .mouseout 组合 - css 不会这样做（不是孩子）？
【发布时间】：2017-12-24 16:26:31
【问题描述】：

小问题：我不能让它工作：

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

【问题讨论】：

标签： jquery css onclick mouseover mouseout

【解决方案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>

【讨论】：

我在问题中添加了一个 sn-p，您的答案仅适用于悬停而不适用于点击
点击工作正常（添加和删除类），但结果与悬停相同。更改 .wrapper-view{left:50%} 你会看到不同。
mhhh... 在我的 sn-p 中它不起作用，或者我哪里错了？当我单击工作按钮时，它不会向左移动：50%
好吧，我到此为止了：mouseout 事件破坏了 click 事件。他们是防止这种情况发生的方法吗？