jQuery悬停用于colorbox图像收集叠加 [英] jQuery hover for colorbox image collection overlay
问题描述
我最近遇到了使用colorbox或 类似的jQuery lightbox插件，将鼠标悬停在上面 jQuery悬停事件触发
I recently came upon the requirement to use colorbox or similar jquery lightbox plugin as mouse over function fired by jQuery hover event
这似乎是使用$ .colorbox()并传递 集合作为REL参数，但我无法使用它.
This seems like a good place to use $.colorbox() and pass the collection as REL parameter, but I can’t get this to work..
http://colorpowered.com/colorbox/
.hover和colorbox确实起作用. 但仅用于一张图片
.hover and colorbox does work when I pass href param .. but only for one picture
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>ColorBox Examples</title>
<style type="text/css">
body{font:12px/1.2 Verdana, Arial, san-serrif; padding:0 10px;}
a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
h2{font-size:13px; margin:15px 0 0 0;}
</style>
<link media="screen" rel="stylesheet" href="colorbox.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="./jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
$("[rel='example3']").hover(
function () {
$.colorbox({rel:"example3",width:"800",height:"800"});
},
function () {
}
);
});
</script>
</head>
<body>
<h2>No Transition + fixed width and height (75% of screen size)</h2>
<p><a href="./content/ohoopee1.jpg" rel="example3" title="Me and my grandfather on the Ohoopee 1.">Grouped Photo 1</a></p>
<p><a href="./content/ohoopee2.jpg" rel="example3" title="Me and my grandfather on the Ohoopee 2.">Grouped Photo 1</a></p>
<p><a href="./content/ohoopee3.jpg" rel="example3" title="Me and my grandfather on the Ohoopee 3.">Grouped Photo 1</a></p>
推荐答案
很抱歉，这个问题..当我改变了思考的方式..答案变得很清晰..当然，单击或鼠标悬停后，colorbox效果很好...
Sorry about this question.. when I changed the way I was thinking about it.. the answer became clear.. colorbox works great with click or mouseover of course...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>ColorBox Examples</title>
<style type="text/css">
body{font:12px/1.2 Verdana, Arial, san-serrif; padding:0 10px;}
a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
h2{font-size:13px; margin:15px 0 0 0;}
</style>
<link media="screen" rel="stylesheet" href="colorbox.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="./jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
$('.example3').colorbox({rel:'example3',width:'75%',height:'75%'}).mouseover(function(){ $(this).click(); });
});
</script>
</head>
<body>
<h2>No Transition + fixed width and height (75% of screen size)</h2>
<p><a href="./content/ohoopee1.jpg" rel="example3" class="example3" title="Me and my grandfather on the Ohoopee 1.">Grouped Photo 1</a></p>
<p><a href="./content/ohoopee2.jpg" rel="example3" class="example3" title="Me and my grandfather on the Ohoopee 2.">Grouped Photo 1</a></p>
<p><a href="./content/ohoopee3.jpg" rel="example3" class="example3" title="Me and my grandfather on the Ohoopee 3.">Grouped Photo 1</a></p>
</body>
</html
这篇关于jQuery悬停用于colorbox图像收集叠加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
