在文本上方标记另一个文本

over text mark another text

本文关键字:文本 另一个 方标记      更新时间:2023-09-26

我正在寻找js代码(可能是jquery),当我过度使用另一个文本时,它会标记一些文本(它们都有相同的ID)

我有很多URL,我想它们上的鼠标会改变表格单元格的颜色

例如:

url1上的overmouse将标记小区ID 20

url2上的overmouse将标记小区ID 18

感谢

为想要突出显示的文本和触发文本创建两个不同的id:

<span id="part1_text" class="class">my text</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus risus at est sollicitudin vulputate. Quisque tristique velit nec lorem consequat non placerat nibh iaculis.
<br /><br />
<span id="text">hover me</span>​

使用hover:

$('#text').on('hover', function(){
    var nextId = '#part1_'+$(this).attr('id');
    $(nextId).toggleClass('class2');
});
​

JSFiddle

更高级的解决方案:http://jsfiddle.net/ggDzw/4/

<table border="1">
    <tr> 
        <td id="cell20">CELL 20</td>
        <td id="cell201">CELL 201</td>
    </tr>
    <tr>
        <td id="cell300">CELL 300</td>
        <td id="cell301">CELL 301</td>
    </tr>
    <tr>
        <td id="cell18">CELL 18</td>
        <td id="cell181">CELL 181</td>
    </tr>
</table>
<h1>
<a id="url1" href="http://www.9gag.com/">URL 1</a><br>
<a id="url2" href="http://www.giorgiacosplay.com/">URL 2</a>
</h1>
​
function URLtoCellHighlight(urlID, cellID) {
$("#" + urlID).hover(
function() {
    $("#" + cellID).addClass("highlight")
}, function() {
    $("#" + cellID).removeClass("highlight")
        });
}
    URLtoCellHighlight("url1", "cell20");
    URLtoCellHighlight("url2", "cell18");
​
.highlight { background-color: yellow }
h1 { color: red }
​

以下是SPAN 的一个基本示例

http://jsfiddle.net/ggDzw/

<span id="text1">TEXT 1</span>
<span id="text2">Other Text</span>
​
.highlight { background-color: yellow }​
$("#text2").hover(
function() {
    $("#text1").addClass("highlight")
}, function() {
    $("#text1").removeClass("highlight")
});​
相关文章: