jquery와 css를 사용하여 이미지 위에있는 텍스트

자습서 http://www.webdesignlondon-tristar.co.uk/website-design-london/insane-jquery-image-rollover을 사용하고 있습니다.jquery와 css를 사용하여 이미지 위에있는 텍스트

전복시 이미지의 색이 바래거나 어둡게 보이고 자습서 에서처럼 텍스트가 나타나길 원합니다. 그러나 어떤 이유로 빈 문서를 시작할 때도 작동하지 않을 수 있습니다.

jquery를 처음 사용하는 것은 아닙니다. 그래서 내가 왜 작동하지 못하게 혼란스러워합니다.

나는 모든 코드를 함께 사용했다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 

<style type="text/css"> 
.wrapper   { padding: 8px; background-color: #fff; border: 1px #0d5a2c solid; position: relative; width:300; height: 300; margin: 0 auto; } 
.wrapper:hover  { cursor: pointer; } 
.description  { display: none; background-color: #000; color: #000; position: absolute; left: 8px; top: 8px; text-decoration: none; font-size: 1.5em; width: 250px; height: 130px; padding: 120px 0 0 0; } 
.description img { vertical-align: middle; margin: 0 2px 1px 0; } 

</style> 

<script src="jquery-1.3.1.min.js" type="text/javascript"> 
$(document).ready(function(){ 
    $('.wrapper').hover(function(){ 
     $(this).children('.description').stop().fadeTo(200, 0.8); 
    },function(){ 
     $(this).children('.description').stop().fadeTo(200, 0); 
    }); 
}); 
</script> 

</head> 



<body> 
<div class="wrapper"> 
<img src="http://www.compuhex.co.uk/Version2/products2/blue.PNG" alt="Product 1" /> 
<a href="#" title="Click for More" class="description"> 
Want to read more? 
</a> 
</div> 

</body> 
</html>

라이브 링크

코드가 지저분한 경우 http://www.compuhex.co.uk/Version2/hovertext/

죄송 볼 수 있습니다. 모든 도움들

에 대한

덕분에 너무 심지어 불구하고 작업 코드 밤은 튜토리얼 사이트에서 복사본이 이유를 찾고 임을 요약합니다. 표시된 기술은 내 웹 사이트에서하고 싶은 것입니다. 감사합니다

출처

2012-06-14 memyselfandmyiphone

이전 버전의 jQuery (1.3.1)을 사용하면 버전 1.4 이상에서 예상대로 작동합니다 (그대로).

<script src="jquery-1.7.2.min.js" type="text/javascript"> 
    $(document).ready(function(){ 
    ... 
</script>

에 :

http://jsfiddle.net/dwrUj/

당신의 예에서 당신이 <script src=.. 요소에 ready 코드를 포장, 당신은 예에서, 두 가지를 분리 할 필요가

<script src="jquery-1.7.2.min.js" type="text/javascript"></script> 
<script type='text/javascript'> 
    $(document).ready(function(){ 
    ... 
</script>

출처

2012-06-14 11:03:34

알렉스 이봐, 내가 JQuery와-1.7.2.min.js에 업데이트에 업로드 http://www.compuhex.co.uk/ Version2/hovertext /하지만 여전히 나타나지 않습니다. 왜 바이올린에서는 작동하지만 브라우저에서는 작동하지 않습니까? 핵심 기본 코드가 누락 되었습니까? 고마워 알렉스 – memyselfandmyiphone

아, 너는 좀 위태로운

교체 UR 코드 :

<script src="jquery-1.3.1.min.js" type="text/javascript"></script> 


<script type="text/javascript"> 

$(document).ready(function(){ 

$('.wrapper').hover(function(){ 


$(this).children('.description').stop().show().fadeTo(200, 0.8); 
},function(){ 
    $(this).children('.description').stop().hide().fadeTo(200, 0); 
}); 


    }); 
</script>

그것은 fine..Version는 문제가되지 않습니다 노력하고 있습니다

출처

2012-06-14 12:25:34

jquery와 css를 사용하여 이미지 위에있는 텍스트

답변

관련 문제