투명 배경의 그림 위에 마우스를 놓고 .jpg

그림을 보시고 http://users.sch.gr/ellhn/을 방문하십시오. 다음이 페이지 뒤에 HTML 코드는 다음과 같습니다 내가 미친 것입니다
투명 배경의 그림 위에 마우스를 놓고 .jpg

 #squared1.over { 
     background: green; 
    cursor: pointer; 
    } 

    #squared2{ 
    position: absolute; 
    left: 250px; 
    cursor: pointer; 
    } 
</style> 
</head> 
<body> 
<img src="img/squared1.png" id="squared1" width="195" height="147" class="rollover"> 
<img src="img/squared1.png" id="squared2" width="195" height="147" 
    class="rollover">  

<script src="js/shaperollover.js"></script>  

<script> 
$("#squared2").hover(
     function() { 
      $(this).animate({ left:300 }, 500); 
      }, 
     function() { 
      $(this).animate({ left:250 }, 500); 
      } 
    ); 

    </script> 
    </body> 
    </html>

. 나는이 저주받은 투명 배경을 사라지게 할 길이 없다. 문제는 보이지 않는 부분에서 호버 효과가 시작된다는 것입니다 (페이지에서 볼 수 있듯이). 첫 번째 그림에서는 Javascript 플러그인 (shaperollover.js라고 함)을 적용하여 올바른 위치에서 효과가 시작되지만 CSS 속성 (# squared1.over - 솔직하게 말해서이 사실을 모르는 경우)을 통해서만 효과가 시작됩니다. 유감스럽게도 Jquery 마우스 오버 또는 마우스 오버 기능은 배경과 함께 전체 그림을 고려하며 두 번째 그림처럼 작동합니다.

jquery에이 속성을 포함 시키거나이 플러그인의 이점을 활용할 수있는 방법이 있습니까? 내가 공중에 떠오르게 애니메이션을 추가하고 싶습니다 이것은 순수한 CSS를 통해 불가능합니다. 아니면 배경이없는 사진을 찍을지 모릅니다. 고맙습니다.

출처

2013-10-19 Unknown developer

CSS3 그래픽 제작을 고려해 보셨습니까? –

두 번째 이미지를 마우스로 이동할 때 녹색 배경을 유지하려고합니까? 당신의 설명이 나에게 불분명하다. – OBV

마우스가 투명 한 이미지가 아니라 이미지의 보이는 부분 위에있을 때만 마우스를 올리려고합니다. –

Is this what you wanted to do? CSS3를 사용하지만 자바 스크립트로 구현하기가 쉽습니다.

<div class="funky-image"><img src="http://users.sch.gr/ellhn/img/squared1.png" alt="" /> 
.funky-image, .funky-image img{ 
    transition: all .3s linear; 
    -webkit-transition: all .3s linear; 
    -moz-transition: all .3s linear; 
    -o-transition: all .3s linear; 
} 

.funky-image:hover{ 
    padding-left:300px; 
} 
.funky-image:hover img{ 
    background-color:#0f0; 
}

이것이 목표가 아니라면 달성하려는 목표에 대해 구체적으로 설명 할 수 있습니까? 그것은 저에게 아주 불분명합니다. 모든

출처

2013-10-19 16:43:02 Elimn

마우스가 투명 한 이미지가 아니라 이미지의 보이는 부분 위에있을 때만 호버 효과를 발생시키고 싶습니다. –

비 직사각형 호버 영역은 이미지 맵을 사용하여 수행 할 수 있습니다. 이 질문의 최상위 답변은 올바른 방향으로 시작해야합니다. http://stackoverflow.com/questions/745110/using-jquery-hover-with-html-image-map – Elimn

첫째, 나는 대부분 또는 모든 .PNG 투명 배경으로하며, 틀리지 않는 경우, 아마도 당신이

#squared1:hover{ 
    //properties here 
}

두 번째 의미, 내가 아는 어떤 .over 속성이 없습니다.

통해 jQuery를, 당신은 예를 들어 .hover 이벤트를 통해 수행 할 수 뭔가를 할 수 있습니다

$('#idOfElement').hover(function(){ 
    $(this).animate({left: 250}, 500); 
})

당신이, 내가 이해하는 힘든 시간을 보내고있어 달성하고자하는 것을 더 명확하게 할 수있는 작업 그것은 당신이 정확히 필요합니다.

출처

2013-10-19 16:43:22 codeninja

불분명 함. 호버 효과가 발사되는 2 개의 그림을 확인하십시오. 마우스가 이미지의 보이는 부분 위에 있고 투명 한 부분 위에 있지 않은 경우에만 해고되기를 원합니다. 또한 # squared1.over를 # squared1 : 대체하면 첫 번째 그림이 원하는대로 작동하지 않습니다. 그러나, # squared1.over가 의미하는 바를 이해할 수 없습니다 ... –

불가능합니다. 이미지가 사각형임을 확인하고 원하는 모양으로 만들 수 없으며 원과 다른 다각형을 만들 수 있습니다. CSS/Javascript로 작업 할 수 있지만 이미지를 만들 수는 없습니다. – codeninja

투명 배경의 그림 위에 마우스를 놓고 .jpg

답변

관련 문제