Question

以下是我用来在我的网站上实施工具提示的JS小提琴。

但是当我在我的网站上实现它时，标题属性值出现在翻转（如alt属性）以及工具提示。我不需要这样做！我网站上的实际代码如下。

的Javascript

$(function(){
  $("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);
 });
 });

HTML

<ul class="thumb">
<li> <img src="slide1image.png" width="200" height="229" title="come join us and have   lots of fun with our clowns, tigers and magician" /></li>

Answer 1

然后不要使用title属性。

使用data-title作为属性名称，并使用$this.data('title')

进行访问

http://jsfiddle.net/gaby/62NT7/1/

演示

Answer 2

由于您要做的事情的本质是防止将鼠标悬停在图像上的默认行为，因此以下内容应该注意：

$('img').on('hover', function( e ) {
    e.preventDefault();
});

WORKING JSFIDDLE DEMO

解决此问题的其他方法包括：

- removing the attribute: $('img').removeAttr('title')
- saving the value to a data attribute and removing it: $('img').data('title', function() { return this.title; }).removeAttr('title');
- editing your markup so that you use a data attribute instead of title attribute - as @GabyakaG.Petrioli's answer.

标题属性值出现在翻转时，如何停止此操作？

2 个答案: