Javascript 试着在一个句子上悬停，然后得到那个句子

我试图创建一个简单的事件，当用户将鼠标悬停在一个句子框中的一个唯一句子上时，左侧幻灯片上的前缀image div（如image熄灭，另一个幻灯片插入）将显示当前句子图像。当不悬停在任何对象上时，主图像显示为默认图像。此外，这些句子的结构也不是新行的，有些句子是新行的（不能改变这一点）

我不能贴照片，但我试着尽可能详细地解释它

我应该如何构造这个？我是否应该在div中使用span标记来识别唯一的句子，以便在悬停时设置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>

$('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可能会如下所示：

<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>

$('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选择器更智能一些

---

现场观看：

用

标签包装你的句子似乎是个好主意。通过为那些

标记提供一个类来识别它们，使其更容易。您可以使用

data attributes

来存储应该显示的图像，例如：

这是一个非常特殊的句子。

我已经将每个句子包装在唯一的跨距中，但我不知道如何格式化随跨距一起显示的图片。我在想，我可以把所有的图像放在一个div中，并隐藏除了默认图像之外的每个图像，然后让mouseover事件发挥它的魔力？你能在jsfiddle.net上发布一些代码吗？当然，我会在5:30下班后发布它，thanks@PaulD.Waite这是JFIDLE上的图片：图像显然不可见，但是你可以看到他们正在从jQuery中移动。嘿，Dan，谢谢你的快速响应，是的，它们都在一个页面上。一个div里面总共有9个句子，在这段div的左边是一个图像div，用来保存可能基于每个句子的图像。Ben-如果只是一个页面，而您在其他任何地方都不使用span，只需使用jQuery选择器$（'span'）。悬停…我同意chip，但我真的不知道如何将特定span元素与其图像关联。我编辑了原始帖子-只要span id为“foo”，图像id为“foo_pic”，上面的逻辑会起作用。Ben-我又做了一次编辑-注意带有这个ID的选择器-我忘记了“#”。