很容易说<a href>和一个按钮可以具有相同的功能，但它不起作用。
这是我网站的示例链接：http://cocopop12.site11.com/search/。 这是一个YouTube插件，右侧有2个按钮，预览和选择。
问题是，如果您点击预览，它应播放YouTube视频。但它不起作用。代码如下。
这是链接（链接正常，我只是在缩略图上复制）：
<a class="videoThumb4" href="http://www.youtube.com/watch?v=' . $yValue['videoid'] . '">
' . $yValue['description'] . '
</a>
这是我想在悬停时替换的按钮。
<input class="videoThumb4" onClick="location.href=\'http://www.youtube.com/watch?v=' . $yValue['videoid'] . '\'" type="button" name="previewSel" value="Preview" id="previewbut">
jQuery代码：
$(function() {
<!-- videoThumb is a css class found in the foreach list class="videoThumb". ytvideo is the holder ID set as div ID-->
$(".videoThumb4").ytplaylist({
holderId: 'ytvideo4',
html5: true,
playerWidth: '520',
autoPlay: false,
sliding: false,
listsliding: true,
social: true,
autoHide: false,
playfirst: 0,
playOnLoad: false,
modestbranding: true,
showInfo: false
});
});
// HOVER
$(document).ready(function(){
$("input[type=button]#previewbut, #selectbut").hide();
$("li#static").hover(
function() {
$(this).find('#previewbut, #selectbut').fadeIn();
},
function() {
$(this).find('#previewbut, #selectbut').fadeOut();
});
});
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Youtube Search</title>
<meta name="description" content="youtube keyword playlist jquery and php Gdata Api version2" />
<meta name="copyright" content="www.cfconsultancy.nl" />
<meta name="web_author" content="Ceasar Feijen" />
<link rel="stylesheet" type="text/css" href="./css/index.css" />
<!-- Remove all above if you are including this file -->
<!-- Needed for the youtube player -->
<link rel="stylesheet" type="text/css" href="./css/youtubeplaylist.css" />
<!-- Example css playlist to the right. See example 3 -->
<link rel="stylesheet" type="text/css" href="./css/youtubeplaylist-right-with-thumbs.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.youtubeplaylist-min.js"></script>
<script type="text/javascript">
$(function() {
<!-- videoThumb is a css class found in the foreach list class="videoThumb". ytvideo is the holder ID set as div ID-->
$(".videoThumb4").ytplaylist({
holderId: 'ytvideo4',
html5: true,
playerWidth: '520',
autoPlay: false,
sliding: false,
listsliding: true,
social: true,
autoHide: false,
playfirst: 0,
playOnLoad: false,
modestbranding: true,
showInfo: false
});
});
// HOVER
$(document).ready(function(){
$("input[type=button]#previewbut, #selectbut").hide();
$("li#static").hover(
function() {
$(this).find('#previewbut, #selectbut').fadeIn();
},
function() {
$(this).find('#previewbut, #selectbut').fadeOut();
});
});
</script>
<!-- CSS -->
<style>
/************** Code for Demo **************/
/* Containing Element */
/* Static Image Shown Before Hover */
a#static{
z-index:1;
}
input[type=button]#previewbut {
background-color: #9B9B9B;
color: #ffffff;
text-decoration:none;
border:0px;
width:100px;
}
input[type=button]#previewbut {
position: absolute;
margin-top:-45px;
margin-left:50px;
cursor: pointer;
font-size: 12px;
line-height: 11px;
padding: 10px 5px;
text-decoration: none;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 1px 1px 2px #5C5C5C;
-webkit-box-shadow: 1px 1px 2px #5C5C5C;
box-shadow: 1px 1px 2px #5C5C5C;
}
input[type=button]#previewbut:hover {
background-color: #007073;
color: #ffffff;
text-decoration:none;
}
input[type=button]#selectbut {
background-color: #9B9B9B;
color: #ffffff;
text-decoration:none;
border:0px;
}
input[type=button]#selectbut {
position: absolute;
margin-top:-45px;
margin-left:170px;
width:100px;
cursor: pointer;
font-size: 12px;
line-height: 11px;
padding: 10px 5px;
text-decoration: none;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 1px 1px 2px #5C5C5C;
-webkit-box-shadow: 1px 1px 2px #5C5C5C;
box-shadow: 1px 1px 2px #5C5C5C;
}
input[type=button]#selectbut:hover {
background-color: #007073;
color: #ffffff;
text-decoration:none;
}
</style>
</head>
<body>
<!-- Needed for the youtube player example 3 -->
<div class="youtubeplayer">
<?php
//if ( !isset( $_POST['subKW'] ) ) {
?>
<h2>Search</h2>
<form method="post" action="<?php echo htmlentities( $_SERVER['PHP_SELF'] ); ?>">
Input keyword : <input type="text" name="kw" value=""> <br />
<input type="submit" name="subKW" value="Search">
</form>
<?php
//} else {
?>
<h2>YT Playlist <a href="index.php">Back</a></h2><!-- END -->
<div class="yt_holder yt_holder_right">
<div id="ytvideo4"></div>
<!--Up and Down arrow -->
<div class="you_up"><img src="css/up_arrow.png" alt="+ Slide" title="HIDE" /></div>
<div class="you_down"><img src="css/down_arrow.png" alt="- Slide" title="SHOW" /></div>
<!-- END -->
<div class="youplayer ytplayerright">
<ul class="videoyou videoytright">
<?php
//$kw = $_POST['kw'];
//global $kw;
// Use like this.
include_once('class/class.youtubelist.php');
//in this example a playlist
//$video = new youtubelist('playlist');
//Keywords
$video = new youtubelist('keywords');
$video->set_keywords( /*$kw*/ 'yoga' );
//This is the link to the playlist.
//http://www.youtube.com/playlist?list=PLAEAD0FC99564BA7F
//REMOVE the PL from the string if there is an PL after list=
$video->set_playlist('AEAD0FC99564BA7F');
$video->set_max(50);
$video->set_order('none'); // to retrieve most actual video's
$video->set_cachexml(false);
$video->set_cachelife(86400);
$video->set_xmlpath('./cache/');
$video->set_start(1);
// --Set text and description length
$video->set_descriptionlength(85);
$video->set_titlelength(25);
if ( $video->get_videos() !=null ) {
foreach ($video->get_videos() as $yKey => $yValue) {
echo '
<li id="static">
<p>' . $yValue['title'] . '</p>
<span class="time timeright">' . $yValue['time'] . '</span>
<a class="videoThumb4" href="http://www.youtube.com/watch?v=' . $yValue['videoid'] . '">
' . $yValue['description'] . '
</a>
<!--<a class="videoThumb4" id="previewbut" href="http://www.youtube.com/watch?v=' . $yValue['videoid'] . '">
Preview
</a>-->
<a class="videoThumb4" id="previewbut" href="http://www.youtube.com/watch?v=' . $yValue['videoid'] . '">
Preview
</a>
<!--<input class="videoThumb4" onClick="location.href=\'http://www.youtube.com/watch?v=' . $yValue['videoid'] . '\'" type="button" name="previewSel" value="Preview" id="previewbut">-->
<input class="videoThumb4" type="button" name="selectSel" value="Select" id="selectbut">
</li>
';
}
}else{
echo '<li>Sorry, no video\'s found</li>';
}
?>
</ul>
</div>
<!-- Remove if you don't want the footer shadow -->
<div style="height:0px; font-size:0em;clear:both;"> </div>
<div class="ytfooter ytfooterright"> </div>
<!-- END -->
</div>
<?php
//}
?>
</div>
<!-- END youtube player -->
</body>
</html>