通过jQuery调用所有标题(和可能是alt)属性 - 并在悬停时对它们进行CSS编辑?

时间:2012-03-21 22:07:52

标签: jquery css

好吧,我想在任何页面周围都有大量的标题(和alt)属性。说实话,到目前为止,我已经使用SweetTitles(js库)打扮了这些,但是由于我的页面支持jQuery,我想用jQuery更快更强大。

有什么建议写入jQuery和.css以在悬停时调用标题(和alt)属性 - 而不向这些添加id?

注意:Sry我的意思是链接和图片中的title和alt属性......比如

<img src="something.jpg **alt**="This is image"> or <a href="something.php" **title**="Go to this page">

标题 =

3 个答案:

答案 0 :(得分:3)

编辑:在您的情况下,您可能需要如下,

img[alt] { /* set style for all img tag with alt attr */ }
a[title] { /* set style for all link tag with title attr */ }

相同的逻辑适用于jQuery:

$('img[alt]') //will return all img tags with alt attribute
$('a[title]') //will return all link tags with title attribute

您需要阅读jQuery和css中的attribute selectors。见以下链接,

jQuery Attribute Selectors

CSS Attribute Selectors

我创建了一个简单的例子来向您展示如何在css和jQuery中使用属性选择器。见DEMO

<强> HTML:

<div title="test" ></div>
<div title="test2"></div>

<div title="test" ></div>
<div title="test2"></div>

<div title="test" ></div>
<div title="test2"></div>

<div title="test" ></div>
<div title="test2"></div>

<强> CSS:

div { width: 20px; height: 10px; margin: 10px; display: inline-block; }

div[title=test] { border: 1px solid red; }

div[title=test2] { border: 1px solid blue; }

<强> JS:

$('div[title=test]').css ('background-color', 'red');

$('div[title=test2]').css ('background-color', 'blue');

我希望它有所帮助。

答案 1 :(得分:0)

您可以尝试以下内容:

$(function() {
    $("body *").each(function(e) {
        if ($(this).attr("title") != undefined && $(this).attr("title") != "") {
            // do work
        }
        if ($(this).attr("alt") != undefined && $(this).attr("alt") != "") {
            // do work
        }
    })
})

答案 2 :(得分:0)

假设您有一个带标题的段落。

在css中你可以:

p[title='something']:hover{
//my css rules here
}

或者使用jQuery:

$("p[title='something']").hover(function(){
// my code comes here
})