0
在一个滑块内我创建的图像展开并出现工具提示,但由于某种原因,我之前运行的代码不再有效。完全相同的代码适用于JSFiddle,但不在线或本地。我不知道为什么。Javascript工具提示不工作,不知道为什么
HTML
<ul class="thumb">
<li> <img src="imagewithtooltip.png" width="200" height="229" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt rhoncus risus sed rhoncus." /> </li>
</ul>
CSS
ul.thumb {
float: none;
list-style: none;
margin: 0;
padding: 10px;
width: 360px;
bottom: 5px;
}
ul.thumb li {
margin: 0;
padding: 5px;
float: right;
position: absolute; /* Set the absolute positioning base coordinate */
width: 200px;
height: 200px;
bottom: 5px;
right: 40%;
}
ul.thumb li img {
width: 200px;
height: 200px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic;
padding: 5px;
position: relative;
left: 0;
top: 0;
}
.hover {
background:url(thumb_bg.png) no-repeat center center;
}
.caption {
background:#ffcc00;
position: absolute;
top: 100%;
left: 0px;
}
的Javascript
<script type="text/javascript">
$("ul.thumb li").hover(function() {
$(this)
.css('z-index', '10')
.find('img').addClass("hover")
.stop()
.animate({
marginTop: '-150px',
marginLeft: '-150px',
top: '50%',
left: '50%',
width: '300px',
height: '300px',
padding: '20px'
}, 200, function() {
var $this = $(this),
h = $this.height();
$caption = $('<div class="caption">' + this.title + '</div>')
.css('top', h.toString() + 'px');
$this.after($caption);
});
}, function() {
$('.caption').remove();
$(this)
.css('z-index', '0')
.find('img').removeClass("hover")
.stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '200px',
height: '200px',
padding: '5px'
}, 400);
});
</script>
网页IS HERE住LINK我刚刚完成平面设计课程和一个朋友,他是一个网页设计师哈哈!
没有仍然没有工作因为某种原因:( – user3760124
@ user3760124,请参阅我的更新答案 –
你好,我想这可能是心不是工作的CSS。当我得到一个正常的alt标签出现在翻滚,但它是明亮的黄色,你看到明亮的黄色工具提示?或只是一个长框? – user3760124