Question

我也试图显示隐藏的跨度，其不透明度为0.6，这是我的代码：

    <span  class="changePicture" id="changePicture"><h3 class="SolidBlack">Change Pictue</h3></span>

的CSS：

 .changePicture{
            background-color:azure;
            margin-left: -248px;
                height: 70px;
            width:246px;
            opacity: 0.6;
              position: absolute;
  z-index: 100;
            color: aliceblue;
            margin-top: 30px;
             padding-left: 30px;
  }
        .SolidBlack{
            font-weight: bold;
    color: #000000;
            opacity: 1;
        }

脚本：

     $(document).ready(function(){
$("#changePicture").hide();

     $(".edit").click(function(){

       $("#changePicture").show(1000);


     });
  });

我可以隐藏元素但不能显示它。我能知道我哪里错了吗？

Answer 1

尝试this Demo

HTML：

<span class="changePicture" id="changePicture"><h3 class="SolidBlack">Change Pictue</h3></span>

<div class="edit">edit</div> <!-- Should add the edit button -->

JavaScript：

$(document).ready(function() {
    $(".changePicture").hide();

    $(".edit").click(function() {
        $(".changePicture").show(1000);
    });
});

CSS：

.changePicture {
  background-color: azure;
  margin-left: -248px;
  height: 70px;
  width: 246px;
  opacity: 0.6;
  position: absolute;
  z-index: 100;
  color: aliceblue;
  margin-top: 30px;
  padding-left: 30px;
}

.SolidBlack {
  font-weight: bold;
  color: #000000;
  opacity: 1;
}

Answer 2

它应该是你的CSS中的.changePicture，你的jQuery代码也有＃changePicture而不是.changePicture

Answer 3

你的代码没有任何问题，它运行正常，但我认为问题是你给span.changePicture一个大的余量 - 左边有负值，所以你看不到它。

本演示中的

：https://jsfiddle.net/IA7medd/u5u9cura/

我只是从你的风格中移除了这个边距，它工作正常。

.changePicture{
  background-color:azure;
  //margin-left: -248px;
  height: 70px;
  width:246px;
  opacity: 0.6;
  position: absolute;
  z-index: 100;
  color: aliceblue;
  margin-top: 30px;
  padding-left: 30px;
}

Answer 4

试试这个;

$(document).ready(function() {
    $(".changePicture").hide();

    $(".edit").click(function() {
        $(".changePicture").show(1000);
    });
});

无法显示隐藏的跨度

4 个答案: