Question

简短的问题：我不能让这个工作：

 $(".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解决方案，如＆＃34;＆gt;＆＃34; ＆安培; ＆＃34; +＆＃34;

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

这是我的snippit我无法让它工作：也许你有任何建议：

＆＃13;

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

＆＃13;

.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}

＆＃13;

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

＆＃13;

Answer 1

超链接缺少href。 .wrapper没有分配职位，并且您的jQuery脚本出错。

顺便说一下，HTML中没有使用.close。

＆＃13;

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

＆＃13;

.wrapper, .close {
  position: relative;
}

＆＃13;

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

＆＃13;

.click .mouseover .mousout合并 - css不会这样做（不是孩子）？

1 个答案: