내 배경 위에 이미지 토글

일부 HTML, CSS 및 JQuery를 배우기 시작했습니다. 그것은 꽤 재미 있고 사용자 친화적이지만, 나는 그것의 일부에 약간의 문제가 있습니다. 배경으로 설정 한 이미지가 있고 흰색 별이 있습니다. 나는 같은 크기의 금색 별의 이미지를 가지고 있으며 별들 중 하나 위에 놓았습니다. 클릭 할 때 금색 별표를 표시하거나 숨기려면 토글 방법을 사용하고 싶습니다. 스택 오버플로 및 다른 사이트에서 많은 질문을 보았습니다. 그리고 나에게 그것이 작동해야하는 것처럼 보였습니다. 오류가 발생하지 않았습니다. 어떤 도움이라도 대단히 감사하겠습니다.내 배경 위에 이미지 토글

편집 : 코드가 수정되었으며, 현재 작동 중입니다!

CSS 코드

#toggle { 
    position:absolute; 
    left:100px; 
    top:109px; 
    width:37px; 
    height:37px; 
    z-index:1; 
} 

#imgStar1 { 
    position:absolute; 
    left:1px; 
    top:-1px; 
    width:38px; 
    height:38px; 
    z-index:1; 
}

HTML 및 JQuery와

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href="css/mainLayout.css" type="text/css" /> 

<style> 
    #bkgd { 
     background: url('images/recents.png') 0 0; 
     overflow: hidden; 
     width: 806px; 
     height: 481px; 
     z-index=-1 
    } 
</style> 
<script type="text/javascript" src="libs/jquery-1.10.2.js"></script> 
<script> 


$(document).ready(function(){ 
    $("#toggle").click(function(){ 
      $("#imgStar1").toggle(); 
     }); 

    }); 



</script> 
</head> 
<body> 
<div id="toggle"> 
    <img id="imgStar1" src="images/star1.png" alt="star1" width="37" height="37"/> 
</div>

출처

2014-09-03 KP123

당신이 잘못 ID 데있어 : HTML의 IMG의 ID에

이 picStar1하지 imgStar1, 그래서 그 변경을 ...

또한 multiplies에 동일한 ID를 사용하면 안됩니다. e 번. ID는 고유해야합니다.

는 해결하려면

그냥 imgStar1와 HTML picStar1에있는 IMG ID를 변경하고 잘 작동합니다.

출처

2014-09-03 18:46:39

덧붙여, 그는'picStar1'의'z-index'가'imgStar1'의 것보다 높다는 것을 확인해야합니다. –

그렇습니다.하지만 div는 배경이고 img는 절대적으로 Z- 인덱스에 문제가 없어야합니다. 위치와 아무데도 Z- 인덱스가 적용됩니다. 어쨌든 OP는 img에 더 높은 z- 인덱스 값을 사용해야합니다. –

감사합니다. 네, 수업과 신분증에 혼란 스럽습니다. 귀하의 수정 프로그램은 @ C-link 네팔에서 일했으나 일단 클릭하고 숨기면 다시 클릭하면 나타나지 않습니다. 지금은 배경 뒤에 있기 때문에 이것입니까? – KP123

내 배경 위에 이미지 토글

답변

관련 문제