jquery hover issues

jquery를 사용하여 수평 확장 가능한 스크롤 이미지 (첨부 된 스크린 샷 참조)에서 검정 위에 텍스트가있는 검은 색 페이드를 만들려고합니다. 분당 이미지가 검은 색으로 변하지 않고 불투명 해집니다. 예제는 여기에서 볼 수 있습니다 : http://deanpauley.co.uk/new/index.html jquery를 처음 사용하는 것은 완전히 혼란 스럽습니다. 어떤 도움이라도 대단히 감사하겠습니다.jquery hover issues

@charset "UTF-8"; 
/* CSS Document */ 

body { 
    font-family: 'Questrial', sans-serif; 
    background:#f5f5f5; 
    border-bottom-left:25px; 
    border-left-color:#F0EFF1; 
    border-left-height:1000px; 
    } 

#border { 
    position:fixed; 
    width:37px; 
    height:8000px; 
    margin-left:-10px; 
    margin-top:0px; 
    z-index:2000; 
    background-color:#f5f5f5; 
    } 

#infoleft 
    { 
    position:fixed; 
    top:20px; 
    left:25px; 
    font-weight:normal; 
    font-size: 15px; 
    letter-spacing: 0.14em; 
    line-height:1.2em; 
    display:block; 
    } 

#infoleft ul { 
    height:20px; 
    font-weight:normal; 
    font-size: 14.5px; 
    letter-spacing: 1px; 
    text-decoration:none; 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
    } 

#infoleft ul li { 
    display: inline; 
    padding: 10px; 
    } 


#inforight 
    { 
    position:fixed; 
    top:21px; 
    right:23px; 
    font-weight:normal; 
    font-size: 14.5px; 
    letter-spacing: 1pxem; 
    } 


#inforight ul { 
    height:20px; 
    font-weight:normal; 
    font-size: 15px; 
    letter-spacing: 0.13em; 
    text-decoration:none; 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
    } 


#images { 
    position:absolute; 
    left:30px; 
    bottom:35px; 
    top:100px; 
    width:25000px; 
    padding-top:80px; 
    min-height:500px; 



} 

img { 
    padding:5px; 
    height:90%; 
} 

img a:hover { 
    color:black; 
    opacity:1; 
} 

a { 
    text-decoration:none; 
    color:#000; 
} 

a:hover { 
    color:#0080ff; 
} 

#showinfo { 
    position:fixed; 
    top:150px; 
    left:35px; 
    width:20px; 
    height:20px; 
    font-size:15px; 
    z-index:2000; 
} 

#showinfo a { 
    color:#000; 
} 

#showinfo a:hover { 
    color:#0080ff; 
    cursor:pointer; 
} 


#projectInfo { 
    position: fixed; 
    background: #f5f5f5; 
    top: 185px; 
    left: 5px; 
    width: 280px; 
    z-index: 1000; 
    padding: 20px 32px 32px 30px; 
    height: 280px; 
    font-size: 13.5px; 
    line-height:1.4em; 
    letter-spacing:0.13em; 
}

그리고 HTML :

<!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> 
<script type='text/javascript' src='jquery.js'></script> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Dean Pauley — Recent work</title> 
<link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script> 
<script defer src="js/script.js"></script> 
</head> 
<body> 
<div id="showinfo"> 
<a href="#" id="showProjectInfo"><span id="showhide">[+]</span></a> 
</div> 
<div id="projectInfo" style="display: block; "> 
      <p>News from Nowhere</p>        
      <p>—</p> 
      <p>A response to The Tyranny of Email by John Freeman exploring how the quality of the written word has deteriorated due to the faster methods of digital communication by contrasting it with that of a pre-digital era. The leather bound-book consists of over 3000 different spam emails. 

</p> 
</div> 
<div id="border"> 
</div> 
<div id="infoleft"> 
<ul> 
<li><a href="index.html">Dean Pauley</a></li> 
<li>Graphic Design</li> 
<li>[email protected]</li> 
<li>+44(0)7969 652 219</li> 
</ul> 
</div> 
<div id="inforight"> 
<ul> 
<li><a href="info.html" class="transition">Information</a></li> 
</ul> 
</div> 
<div id="images"> 
<a href="#"><img src="images/img_off.jpg" /></a> 
<a href="#"><img src="images/Calendar1.jpg" /></a> 
<a href="#"><img src="images/img_off.jpg" /></a> 
<a href="#"><img src="images/Calendar1.jpg" /></a> 
<a href="#"><img src="images/img_off.jpg" /></a> 
<a href="#"><img src="images/Calendar1.jpg" /></a> 
<img src="images/NFN800.jpg" /> 
<img src="images/NFN800.jpg" /> 
<img src="images/NFN800.jpg" /> 
<img src="images/NFN800.jpg" /> 
<img src="images/NFN800.jpg" /> 
</div> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
    $("img").hover(function() { 
     $(this).stop().animate({opacity: "0.8"}, '100'); 
    }, 
    function() { 
     $(this).stop().animate({opacity: "1"}, '100'); 
    }); 
    }); 
</script> 

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
    <script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script> 


<script type="text/javascript"> 
$(document).ready(function(){ 
     $("projectinfo").hide(); 
     $("showprojectinfo").show(); 
    $('.show_hide').click(function(){ 
    $("projectinfo").slideToggle(); 
    }); 
}); 
</script> 
<script src="js/script.min.js"></script> 
</body> 


</html>

스크린 샷 :

image on hover

EditIt 지금 @Duopixel 작동을하지만 지금은 검은 색을 가지고 다음과 같이

CSS의입니다 경계. 첨부 된 스크린 샷을 참조하십시오. 이걸 어떻게 없앨 수 있습니까?

enter image description here

"편집"

출처

2012-01-12 Dean Pauley

추가 ...

#images a { 
    display: inline-block; 
    background: black; 
    margin-right: 3px /*adjust to your linking*/ 
} 

#images img { 
    padding: 0; 
}

그런 다음 당신에게 잘 보이는 무엇에 jQuery를에 불투명도를 조정합니다.

출처

2012-01-12 11:26:02 Duopixel

예! 이 잘 작동하고 있습니다 .. @Duopixel, http://jsfiddle.net/m7a8r/ 샘플을 위해 gravatar 사용했습니다이 작동하는지 확인하십시오 – Rafee

그러나 어떻게 지금 나타나는 검은 색 테두리 제거 할 수 있습니까? –

CSS에'#images img {...} '를 추가 했습니까? #images { \t 위치 : – Duopixel

코드에서 찾은 내용이 누락되었습니다. '#'& '.' jQuery 코드의 접두어는 아래의 수정 사항입니다 : '.'

$("#projectinfo").hide();

또는

$(".projectinfo").hide();

'#'은 ID가 접두사로 사용되는 점에 유의하시기 바랍니다 클래스의 접두사로서 사용됩니다. 따라서 projectinfo가 cssClass의 이름이면 두 번째 옵션이 도움이 될 것입니다 :

희망이 도움이됩니다.

출처

2012-01-12 13:16:06

jquery hover issues

답변

관련 문제