Question

这是我的工作：

https://jsfiddle.net/anwarirumbuzhi/kt2o7443/

我想在翻转区域创建一个CSS关闭按钮，但我不知道如何添加一个关闭脚本。

#image-expand {
    width: 116%;
    position: absolute;
    white-space:nowrap;
      margin-top: 75px;
}

#image-expand div {
    float: left;
    position: relative;
}

#image-expand div .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 200px;
    z-index: -1;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
    overflow: hidden;
    z-index: 500;
}

#image-expand div label {
    width: 390px;
    height:80vh;
    display: block;
    box-shadow: inset -25px 0px 30px -10px rgba(0,0,0,0.05);
    cursor: pointer;
    border-right: 1px solid #333;
    color: #222;
    overflow: hidden;
    position: relative;
    z-index: 1000;
}

#image-expand div label span {
      width: 100%;
      display: block;
      position: relative;
      top: 70px;
      font-family: 'Conv_AvenirLTStd-Medium',Sans-Serif;
      font-size: 24px;
      text-align: center;
      color:#373837;
      font-weight: bold;

}

#image-expand input[type=radio] {
    opacity: 0; 
}

#image-expand input:checked ~ .content {
    width: 275px;
      overflow: hidden;
      background:#000;
    height:80vh;
      margin-left: 380px;;
    border-right: 1px solid #ddd;
}

#image-expand .content, #image-expand label, #image-expand input {
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    -ms-transition: all 0.5s ease-in;
}


#image-expand label:hover ~ input:checked + .content {
    width: 275px;
}


#image-expand label:hover ~ .content {
    width: 111px;
}

#image-expand input{margin-right: 0;}

#image-expand input:checked {
    margin-right: 587px;
}

Answer 1

如果您问如何将JavaScript添加到.css文件中，那么答案是您无法将脚本添加到css文件中，您必须在javascript文件中或html文件中的内部标记中执行此操作。您应该将网站/应用程序中这些截然不同的组件分开另外，正如评论所说，你的小提琴是一团糟，你的问题在语法上没有多大意义。将来会为小提琴添加许多评论等，并且只发布与问题相关的内容。

如何在CSS中添加关闭按钮

1 个答案: