Question

我在网站上找到了一个我想使用JQuery模拟的flash片段： http://www.jbcoxwell.com/construction_services.html

在搜索此网站时，我发现有一个帖子可用作启动我的脚本的基础： Show #id - hide #id when hover another #id

我得到了悬停工作并显示照片区域。我更像是一个新手爱好者，有时会遇到语法问题，但是当它真的崩溃的时候我试图在翻转时定位文本链接的id并将其与图像匹配。我不确定如何将文本与正确的图像匹配。我知道使用ID两次是禁止的，所以如何将两个项目组合在一起，但在功能方面又将它们分开？

这是我的HTML代码：

<body><div id="container">
<div class="text" id="txt1">Service 1</div>
<div class="text" id="txt2">Service 2</div>
<div class="img" style="display: none" id="img1">Photo 1</div>
<div class="img" style="display: none" id="img2">Photo 2</div></div></body>

我的CSS：

 #img1 {
 background-image: url(image/img1.jpg);
 background-color: red;}
 #img2 {
 background-image: url(image/img2.jpg);
 background-color: blue;}    
.text {
 width: 150px;
 height: 15px;
 background-color: #7a7a7a;
 float: left;
 clear: left;
 margin-bottom: 25px;}
.img {
 width: 300px;
 height: 100px;
 float: right;}

我的.js文件：

$(function() {
    // define the mouseover event for text
$('.text'+this.id).mouseover(function() {
        $('.img').css('display', 'block');
    });

    // define the mouseout event for text       
$('.text'+this.id).mouseout(function() {
        $('.img').css('display', 'none');
    });

});

我花了很多时间在这个和其他网站上查看这里和那里的片段，但我似乎一直在圈子里。我很想知道我在哪里出错了。谢谢你的时间！

*编辑：这是我能够做到的最实用的版本： http://jsfiddle.net/aburgin/EKb4E

Answer 1

试试这个：http://jsfiddle.net/hAsX3/2/

你最终使用id＃1和＃2来表示多个元素 - 不要这样做。我将相应元素的id存储在text元素的data属性中。

Answer 2

<div id="container">
<div class="text" id="image1">Service Name 1</div>
<div class="text" id="image2">Service Name 2</div>
<div class="img image1" style="display: none" id="1">Photo 1</div>
<div class="img image2" style="display: none" id="2">Photo 2</div>
</div>


$(function() {
    // define the mouseover event for text
    $('.text').mouseover(function() {
        $('.' + $(this).attr("id")).css('display', 'block');
    });

 $('.text').mouseout(function() {
    $('.' + $(this).attr("id")).css('display', 'none');
});

});

http://jsfiddle.net/jensbits/EKb4E/56/

Answer 3

感谢Dennis＆amp; Jen我能够使用他们的答案来提出一个几乎完整的脚本来模仿原始帖子中的示例。我使用了Jen的脚本结构，但包括Dennis分享的漂亮技巧。数据文本名称用于我的上/下图像名称，因此我可以在脚本中操作它们时将它们拼凑在一起。唯一缺失的部分是悬停物品保持可见，直到另一个物品悬停。但这是我将试图自己解决的问题。以下是我能够整理的内容：

HTML：

<div id="serv_list">
  <div id="text_list">
    <div class="text" id="img1" data-text="serv1" style="background-image: url(services/serv1_up.png);"></div>
    <div class="text" id="img2" data-text="serv2" style="background-image: url(services/serv2_up.png);"></div>
  </div>
  <div id="img_list">
    <div class="img img1" style="display: none" id="1"></div>
    <div class="img img2" style="display: none" id="2"></div>
  </div>
</div>

CSS：

#serv_list {
margin-top: 20px;}
.img1 {
background-image: url(services/serv1.jpg);}
.img2 { 
background-image: url(services/serv2.jpg);}
#text_list {
float: left;
width: 200px;}
.text {
width: 200px;
height: 18px;
float: left;
clear: left;
margin-bottom: 25px;}
#img_list {
float: right;
width: 450px;}
.img {
width: 450px;
height: 300px;
float: right;
clear: both;}

JS：

$(function() {
$('.text').mouseover(function() {
var bg = $(this).data("text");
$('.' + $(this).attr("id")).css('display', 'block');
$(this).css('cursor','pointer');
$(this).css('background-image', 'url(services/' + bg + '_ovr.png');
});
$('.text').mouseout(function() {
$('.' + $(this).attr("id")).css('display', 'none');
$(this).css('background-image', 'url(services/' + $(this).data("text") + '_up.png');
});
});

翻转基于文本/图像的链接以显示图像

3 个答案: