我使用datatables.net和boostrap并在图像上悬停效果。 展开表内的图像必须与表格外的图像相同，无法找到原因：
http://jsfiddle.net/rokas_m/rqokaub2/
<!DOCTYPE html>
<html>
<head>
<title>timeline</title>
<meta charset="UTF-8" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="timeline2.css">
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.8/css/jquery.dataTables.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
<style>
.thumbnail {
position:relative;
overflow:hidden;
}
.caption {
position:absolute;
top:0;
right:0;
background:rgba(66, 139, 202, 0.75);
width:100%;
height:100%;
padding:2%;
display: none;
text-align:center;
color:#fff !important;
z-index:2;
}
img {
max-height: none;
min-height: 0;
}
td.details-control {
background: url('https://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('https://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
}
</style>
</head>
<body>
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-body">
<table id="table" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th >Pavadinimas</th>
<th >Antraštė</th>
<th>Tipas</th>
<th>Išsiuntimo / gavimo data</th>
<th>Data</th>
<th>Dokumento nr.</th>
</tr>
</thead>
</table>
<div class="col-md-3">
<div class="thumbnail">
<div class="caption">
<h6>Dokumentas.doc</h6>
<p><a href="" class="label label-danger" rel="tooltip" title="View">Žiūrėti</a>
<a href="" class="label label-default" rel="tooltip" title="Add">Pridėti</a></p>
</div>
<img src="http://icons.iconarchive.com/icons/graphicloads/filetype/64/pdf-icon.png" alt="..."></img>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<div class="caption">
<h6>Dokumentas.doc</h6>
<p><a href="" class="label label-danger" rel="tooltip" title="View">Žiūrėti</a>
<a href="" class="label label-default" rel="tooltip" title="Add">Pridėti</a></p>
</div>
<img src="http://icons.iconarchive.com/icons/graphicloads/filetype/64/word-doc-icon.png" alt="..."></img>
</div>
</div>
</div>
</div>
</div>
<script>
/* Formatting function for row details - modify as you need */
function format ( d ) {
// `d` is the original data object for the row
return '<table>'+
'<tr >'+
'<td><strong>Dokumentai: </strong></td>'+
'<td><div>'+
'<div class="thumbnail">'+
'<div class="caption">'+
'<h6>'+d.dokumentai+'</h6>'+
'<p><a href="" class="label label-danger" rel="tooltip" title="View">Žiūrėti</a>'+
'<a href="" class="label label-default" rel="tooltip" title="Add">Pridėti</a></p>'+
'</div>'+
'<img src="'+d.dok_ikona+'"></img>'+
'</div>'+
'</div></td>'+
'</tr>'+
'</table>';
}
$(document).ready(function() {
var table = $('#table').DataTable( {
"order": [[ 3, "desc" ]],
"paging": false,
"searching": false,
"data": [
{
"pavadinimas": "Pretenzijos, reikalavimai Biurui",
"antraste": "Dėl išmokos",
"tipas": "Gautas",
"siunt_gav_data": "2015/08/24",
"data": "2011/04/25",
"dok_nr": "G00-100",
"dokumentai": "dokumentas.doc",
"dok_ikona": "http://icons.iconarchive.com/icons/graphicloads/filetype/64/pdf-icon.png"
},
{
"pavadinimas": "Pretenzijos, reikalavimai Biurui",
"antraste": "Dėl išmokos",
"tipas": "Gautas",
"siunt_gav_data": "2015/08/25",
"data": "2011/04/26",
"dok_nr": "G00-101",
"dokumentai": "dokumentas.pdf",
"dok_ikona": "http://icons.iconarchive.com/icons/graphicloads/filetype/64/pdf-icon.png"
}
],
"columns": [
{
"className": 'details-control',
"data": null,
"defaultContent": ''
},
{ "data": "pavadinimas" },
{ "data": "antraste" },
{ "data": "tipas" },
{ "data": "siunt_gav_data" },
{ "data": "data" },
{ "data": "dok_nr" }
],
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 0,1,2,3 ] }
]
} );
// Add event listener for opening and closing details
$('#table tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
} );
} );
$( document ).ready(function() {
$("[rel='tooltip']").tooltip();
$('.thumbnail').hover(
function(){
$(this).find('.caption').slideDown(250); //.fadeIn(250)
},
function(){
$(this).find('.caption').slideUp(250); //.fadeOut(205)
}
);
});
</script>
</body>
</html>
答案 0 :(得分：2)
http://jsfiddle.net/rqokaub2/1/
我更改了那部分：
$('.thumbnail').hover(
function(){
$(this).find('.caption').slideDown(250); //.fadeIn(250)
},
function(){
$(this).find('.caption').slideUp(250); //.fadeOut(205)
}
);
并使用：
$(document).on('mouseenter', '.thumbnail', function(){
$(this).find('.caption').slideDown(250); //.fadeIn(250)
});
$(document).on('mouseleave', '.thumbnail', function(){
$(this).find('.caption').slideUp(250); //.fadeOut(205)
});
直接使用hover / click等的绑定函数仅适用于已加载的元素。但是当您使用on方法（过去live）时，所有元素（已经未加载的事件将被绑定）。 on方法非常有用，尤其是当您使用通过AJAX加载的大量内容时
答案 1 :(得分：0)
当你到达这行代码时：
$('.thumbnail').hover(
该表尚未填写;所以在处理＆＃34; plus＆＃34;的函数中单击标记，您必须再次添加在外部图像中悬停效果的代码。
答案 2 :(得分：0)
将此代码用于图像悬停：
$("[rel='tooltip']").tooltip();
$(document).on("mouseenter", ".thumbnail", function() {
$(this).find('.caption').slideDown(250); //.fadeIn(250)
});
$(document).on("mouseleave", ".thumbnail", function() {
$(this).find('.caption').slideUp(250); //.fadeOut(205)
});
小提琴link