Question

我正在尝试创建一个简单的事件，当用户将鼠标悬停在一个句子框中的唯一句子上时，左侧的前缀图像div向左滑动（如图像熄灭，另一个滑入）以显示目前的句子形象。当不悬停在任何内容上时，主图像显示为默认图像。此外，句子没有被构造成新的行，其中一些继续换行（不能改变它）。

我无法发布图片，但我试图尽可能详细地解释它。

我应该如何构建这个？我应该在div中使用span标签来识别唯一的句子，以便我可以在悬停时设置该span的背景颜色和图像事件吗？

请告诉我最佳解决方案。谢谢。

Answer 1

我的第一个倾向是，是的，你需要在<span>中包装你的特定文本片段，以使它们可以被推翻（排除它们周围的文字）。在语义上它也是最有意义的。然后，您必须为跨度提供某种ID，您可以使用它来配合所需的效果。

粗略地说，你的标记看起来像这样：

<p>This is your before your sample sentence. <span id="hover_1">This IS your sample sentence.</span> <span id="hover_2">This is yet another sample sentence.</span> This is after your sample sentence.</p>
<div id="images">
  <img src="http://farm8.staticflickr.com/7171/6717705777_268acd6b2a_m.jpg" id="original" />
  <img src="http://farm8.staticflickr.com/7014/6717705405_80e172b437_m.jpg" id="hover_1_pic" /> 
  <img src="http://farm8.staticflickr.com/7144/6717706163_68e9b6f0d4_m.jpg" id="hover_2_pic" /> 
</div>

现在你需要一些css：

span { background: yellow; cursor: pointer;}
#images img { display: none; }
#images #original { display: block; }

然后你的jQuery看起来像这样：

$('span').hover( 
function(){
    var thisId = $(this).attr('id');
    $('#images img').stop().fadeOut('fast');
    $('#' + thisId + '_pic').delay(300).fadeIn('normal');
},
function(){
    var thisId = $(this).attr('id');
    $('#' + thisId + '_pic').stop(true, true).fadeOut('fast',function(){
    $('#original').stop(true, true).fadeIn('normal');
    });
    $('#original').stop(true, true).css('opacity', 1); 
}
);

我不知道你打算在这个页面中有多少这些句子，或者有多少页面，所以你可能需要努力让jQuery选择器变得更聪明。

现场直播：http://jsfiddle.net/chippper/mMw5x/

试图将鼠标悬停在句子上并获得该句子

1 个答案: