Question

我想制作全宽手风琴，我做了类似的事情：

＆＃13;

.page {
     margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 100vh;
}

.content {
    -webkit-box-flex: 0.4;
    -webkit-flex: 0.4;
    -ms-flex: 0.4;
    flex: 0.4;
    -webkit-transition: -webkit-box-flex 500ms ease-out;
    -webkit-transition: -webkit-flex 500ms ease-out;
    transition: -webkit-box-flex 500ms ease-out;
    transition: -ms-flex 500ms ease-out;
    transition: flex 500ms ease-out;
    padding: 20px;
}

.content:hover {
  -webkit-box-flex: 50;
    -webkit-flex: 50;
    -ms-flex: 50;
    flex: 50;
}

＆＃13;

<div class="page">
  <div class="content one">Content</div>
  <div class="content two">New</div>
  <div class="content three">Div</div>
  <div class="content four">Tag</div>
  <div class="content five">Here</div>
</div>

＆＃13;

并且我无法将该悬停的东西替换为点击。我试图使用jquery但失败了。我也希望Content div成为一开始最大的页面，所以我尝试使用输入收音机的东西，但我也失败了。

Answer 1

我不太确定我是否理解你的要求，但似乎你想在点击内容时使一些css规则有效。

您可以做的是添加如下事件：

 $(".content").click(function(){
    $(".content").toggleClass("when-clicked");
 });

然后你的造型应该有这样的东西：

.content.when-clicked{
    -webkit-box-flex: 50;
    -webkit-flex: 50;
    -ms-flex: 50;
    flex: 50;
 }

应该做的伎俩

我该怎么做才能取代：将鼠标悬停在可点击的东西上

1 个答案: