Reputation: 57
I have 10 images each with a class 1-10 how can i make the function work for every class? Works fine with class="1". Just not sure how to add them together?
<body>
<div>
<img src="img/13-01_basic_hover.jpg" class="1" width="220" height="184" title="huge, gigantic">
<img src="img/13-01_basic_hover.jpg" class="2" width="220" height="184" title="Number 2">
</div>
<div class="project"></div>
<script>
var title = $(".1, .2").attr("title");
$(".project").text(title);
$(document).ready(function () {
$(".project").fadeTo(0,0);
$(".1, .2").hover(
function () {
$(".project").stop(true).fadeTo("normal",1);
},
function () {
$(".project").fadeTo("normal",0);
}
);
});
</script>
</body>
Upvotes: 0
Views: 93
Reputation: 79840
Just add them as a comma seperated value,
$(".1, .2, .3, .4, .5, .6, .7, .8, .9, .10").hover(
function () {
$(".project")
.text(this.title)
.stop(true).fadeTo("normal",1);
},
function () {
$(".project").fadeTo("normal",0);
}
);
Or add another class to those elements and group them and then you can,
$(".grouped").hover(
function () {
$(".project")
.text(this.title)
.stop(true).fadeTo("normal",1);
},
function () {
$(".project").fadeTo("normal",0);
}
);
Upvotes: 2
Reputation: 114417
Class names starting with numbers are invalid. You should change this.
Class names are usually used to select groups of items anyway. Just add a second class name for all your items and use that instead of .1
.
Upvotes: 1