0

当将鼠标悬停在 div 上时，id="single-main"我如何获得 ul 中匹配 ID 的文本颜色以及class="contract-list"文本以更改颜色？

我似乎有很多悬停和打开的例子。但是没有一个通过ID。

我的 HTML 是：

<div id="single-main" class="clearfix">                    
    <a id="postID" href="http:www.xxxxxx.xx/" title=" "><img width="112" height="150"     src="http:www.xxxxxx.xx/X.jpg" class="some class" alt="" title= "" /></a>
    <a id="postID2" href="http:www.xxxxxx.xx/" title=" "><img width="112" height="150" src="http:www.xxxxxx.xx/X.jpg" class="some class" alt="" title= "" /></a>    
</div>

<ul class="contract-list">
    <li>
        <a  id="postID" href="http://www.xxxxxx.xx/" rel="bookmark" title=" "> ADVERTISING</a>
    </li>
    <li>
        <a  id="postID2" href="http://www.xxxxxx.xx/" rel="bookmark" title=" "> ADVERTISING2</a>
    </li>
</ul>​​​​​​​​​​
4

3 回答 3

1

尽管我强烈不同意您的编码技术，因为它们违反了 W3C 标准。我将使用你的 HTML 来提供一个工作演示。

http://jsfiddle.net/c3rfq/4/

我使用 This javascript 查看您定义的每个 div 和 ul 内部。通过这种方式，您可以按照自己的模式添加任意数量的图像和链接，但我强烈建议您使用类而不是 id

$('div#single-main a').hover(function(){
    $('ul.contract-list #'+$(this).attr('id')).css('color','red');
},function(){
    $('ul.contract-list #'+$(this).attr('id')).css('color','');
});

为了获得更好的standards-based答案，我会查看其他答案。我只是想用你给我们的东西展示一个“有效”的例子。

于 2012-09-08T01:45:22.480 回答
0

你可以试试这个

HTML（通知id's替换为classesinul的a标签）

<div id="single-main" class="clearfix">
    <a id="postID" href="http:www.xxxxxx.xx/" title=""><img width="112" height="150" src="http:www.xxxxxx.xx/X.jpg" class="some class" alt="" title= "" /></a>
    <a id="postID2" href="http:www.xxxxxx.xx/" title=""><img width="112" height="150" src="http:www.xxxxxx.xx/X.jpg" class="some class" alt="" title= ""/></a> 
</div>

<ul class="contract-list">
    <li>
        <a  class="postID" href="http://www.xxxxxx.xx/" rel="bookmark" title=" "> ADVERTISING</a>
    </li>
   <li>
       <a  class="postID2" href="http://www.xxxxxx.xx/" rel="bookmark" title=" "> ADVERTISING2</a>
   </li>
</ul>

JS

$(function(){
    $('#single-main a').on('mouseenter', function(){
        $('.'+$(this).attr('id')).css('color', 'red');
    }).on('mouseleave', function(){
        $('.'+$(this).attr('id')).css('color', 'black');
    });
});​

演示。

于 2012-09-08T01:36:13.990 回答
0

使用data-属性...

<div id="single-main" class="clearfix">                    
    <a data-id="postID" href="http:www.xxxxxx.xx/" title=" "><img width="112" height="150" src="http:www.xxxxxx.xx/X.jpg" class="some class" alt="" title= "" /></a>
    <a data-id="postID2" href="http:www.xxxxxx.xx/" title=" "><img width="112" height="150" src="http:www.xxxxxx.xx/X.jpg" class="some class" alt="" title= "" /></a>    
</div>

<ul class="contract-list">
    <li>
        <a id="postID" href="http://www.xxxxxx.xx/" rel="bookmark" title=" "> ADVERTISING</a>
    </li>
    <li>
        <a id="postID2" href="http://www.xxxxxx.xx/" rel="bookmark" title=" "> ADVERTISING2</a>
    </li>
</ul>

然后您可以使用以下脚本...

$(function(){
    $("#single-main").on("mouseenter", "a", function(){
        $("#"+$(this).data("id")).css("color", "red");
    }).on("mouseleave", "a", function(){
        $("#"+$(this).data("id")).css("color", "");
    });
});

这是一个小提琴http://jsfiddle.net/ZLEQw/

于 2012-09-08T01:44:22.990 回答