[jQuery] how to use jquery to solve css attribute selector which doesn't support in IE
Here is my html code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="langbar.js"></script>
<style tyle="text/css">
<!--
.item-list ul {
height:34px;
padding:0px;
margin:0px;
list-style-type:none;
}
.item-list li {
display:block;
float:left;
padding:0px;
margin:0px;
}
.item-list ul li a {
text-indent:-999em;
display:block;
}
li a[title="English"] {
height:34px;
width:89px;
/* background:url("eng.jpg") no-repeat; */
}
.item-list li:hover a[title="English"] {
background-position:0 -34px;
}
li a[title="Chinese Traditional HK"] {
height:34px;
width:125px;
/* background:url("chi.jpg") no-repeat; */
}
.item-list li:hover a[title="Chinese Traditional HK"] {
background-position:0 -34px;
}
.item-list li.sfHover {
background-position:0 -34px;
}
-->
</style>
</head>
<body>
<div id="langbar">
<div class="item-list">
<ul>
<li><a href="a.html" title="English" class="uilocale">English</
a></li>
<li><a href="b.html" title="Chinese Traditional HK"
class="uilocale">Chinese Traditional HK</a></li>
</ul>
</div>
</div>
</body>
</html>
Here is langbar.js
$(document).ready(function(){
$("li a[@title=English]").css({background:"url('eng.jpg')"});
$("li a[@title=Chinese Traditional
HK]").css({background:"url('chi.jpg')"});
});
However it still not work in IE. There is no image button show in IE.
Anything wrong in my code ?