Nicht in der Lage zeigt versteckt Spanne

Question

ich eine versteckte Spanne zu zeigen versuchen, die eine Trübung von 0,6 hat und das ist mein Code:

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

Script:

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

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

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


    }); 
    }); 

Ich kann das Element ausblenden, aber nicht anzeigen. Kann ich wissen, wo ich falsch liege?

Answer 1

es sollte in Ihrem CSS .changePicture werden, mit zu beginnen und Ihre jQuery-Code hat auch #changePicture statt .changePicture

Answer 2

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

Versuchen Sie dies;

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

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

Answer 4

Sie haben kein Problem in Ihrem Code, es funktioniert gut, aber ich denke, das Problem ist, dass Sie die span.changePicture eines großer margin-left mit negativem Wert geben, so dass Sie nicht sehen können.

in dieser Demo: https://jsfiddle.net/IA7medd/u5u9cura/

entferne ich nur diese Marge von Ihnen Stil und es gut funktionieren.

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