비디오 호버 효과

내가 마우스 그냥 내가 해결책을 찾기 위해 노력 해왔다이 website 비디오 호버 효과

에서처럼 비디오를 튀어 나올 것 이상 때 인 이미지에서 비디오 호버 효과를 만들려고 노력하고 있어요 지난 몇 달 동안이 문제.

누구나 방법을 알고 있습니까?

이것은 실제로 내가 가져올 수있는 이미지 호버 효과입니다. 이미지가 나타나지 않고 비디오처럼 이미지가 튀어 나오게하는 방법이 있습니까?

<html> 
<head> 
<title>Test</title> 
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script> 


<script type="text/javascript"> 


$(document).ready(function() { 


    $('div.thumbnail-item').mouseenter(function(e) { 


     x = e.pageX - $(this).offset().left; 
     y = e.pageY - $(this).offset().top; 


     $(this).css('z-index','15') 
     .children("div.tooltip") 
     .css({'top': y + 10,'left': x + 20,'display':'block'}); 

    }).mousemove(function(e) { 


     x = e.pageX - $(this).offset().left; 
     y = e.pageY - $(this).offset().top; 


    $(this).children("div.tooltip").css({'top': y + 10,'left': x + 20}); 

    }).mouseleave(function() { 


     $(this).css('z-index','1') 
     .children("div.tooltip") 
     .animate({"opacity": "hide"}, "fast"); 
    }); 

}); 


</script> 
<style> 

    .thumbnail-item { 

position: relative; 
float: left; 
margin: 0px 5px; 
    } 

     .thumbnail-item a { 
display: block; 
     } 

    .thumbnail-item img.thumbnail { 
border:3px solid #ccc; 
    } 

     .tooltip { 

display: none; 

position: absolute; 

padding: 8px 0 0 8px; 
     } 

.tooltip span.overlay { 

    background: url(images/overlay.png) no-repeat; 

    position: absolute; 
    top: 0px; 
    left: 0px; 
    display: block; 
    width: 350px; 
    height: 200px; 
} 
</style> 
    </head> 
    <body> 



<div class="thumbnail-item"> 
    <a href="#"><img src="images/Capture1.jpg" class="thumbnail"/></a> 
    <div class="tooltip"> 
     <img src="images/2 Davis Road.jpg" alt="" width="330" height="185" /> 
     <span class="overlay"></span> 
    </div> 
</div> 

<div class="thumbnail-item"> 
    <a href="#"><img src="images/Capture2.jpg" class="thumbnail"/></a> 
    <div class="tooltip"> 
     <img src="images/Camberwell Town Hall, Roof Restoration.jpg" alt="" width="330" height="185" /> 
     <span class="overlay"></span> 
    </div> 
</div> 

<div class="thumbnail-item"> 
    <a href="#"><img src="images/Capture3.jpg" class="thumbnail"/></a> 
    <div class="tooltip"> 
     <img src="images/Children.jpg" alt="" width="330" height="185" /> 
     <span class="overlay"></span> 
    </div> 
</div>  

<div class="clear"></div>

출처

2013-12-12 smb1515

당신은 시도 몇 달을 보냈어요 :

여기 jQuery로 코드의 예? 보여 주신 것을 보여주십시오. 해당 페이지에서 소스를 보는 데 5 분을 소비하면 마우스 오버를 처리하고 내용을주고 그 내용을 쉽게 찾을 수 있습니다. – paddy

@paddy : 내가 가지고있는 코드를 추가했습니다. 제발 보시기 바랍니다. – smb1515

웹 사이트가 그럴 때 나는 싫어합니다. 실수로 마우스를 무언가 위에 올려 놓았습니다. 비디오가 튀어 나와 내 netbook을 잠갔습니다. 나는 그것을 닫으려고 계속했지만 비디오 및 페이지의 다른 모든 자바 스크립트 너무 일을 너무 천천히 만들어 내 컴퓨터를 사용할 수 없습니다. –

당신은 툴팁에 비디오 요소를 삽입하기 위해 이벤트 리스너 (mouseenter 및 mouseleave)와 jQuery를 사용할 수 있습니다. Bootstrap 및 jQuery UI은 웹 사이트에서 사용할 수있는 훌륭한 툴팁을 제공합니다.

$(".video").on("mouseenter", function(){ 
    var video = "<video></video>"; // remember to add the src attribute, etc... 

    // code for displaying tooltip 

    $(".tooltip").append(video); // assuming tooltip has class of .tooltip 

    $(this).on("mouseleave", function(){ 
     // code here for hiding the tooltip when the hover stops 
    } 
})

출처

2014-01-05 17:07:59 hitecherik

비디오 호버 효과

답변

관련 문제