简单和新界面的开始:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="./style/style.css" />
<script src="./javascript/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var color = $('#title_buttom').css('background-color');
$('.title_all').mouseover(function(){
var styles = {
backgroundColor : '#FF0C55'};
$('#title_buttom').css( styles );
});
$('.title_all').mouseout(function(){
$('#title_buttom').css('background-color',color);
});
});
</script>
</head>
<body>
<div id='all_div'>
<div id='master'>
<div id='title_top'>
<div id='title_home' class='title_all'>Home</div>
<div id='title_info' class='title_all'>Info</div>
<div id='title_project' class='title_all'>Projects</div>
<div id='title_contectus' class='title_all'>Contect us</div>
</div>
<div id='title_buttom'></div>
</div>
</div>
</body>
</html>
出于同样的原因,我不知道为什么只有Opera浏览器可以使用此代码,而Firefox和Chrome不能。 这是为什么呢?
链接到 CSS 文件
试试这个
$(document).ready(function () {
var color = $('#title_buttom').css('background-color');
$('.title_all').on('mouseover',function () {
var styles = {
backgroundColor: '#FF0C55'
};
$('#title_buttom').css(styles);
});
$('.title_all').on('mouseout',function () {
$('#title_buttom').css('background-color', color);
});
});
您可以在这里尝试一下,以检查在样式对象中使用背景颜色而不是背景颜色是否存在问题。
$(document).ready(function ()
{
var color = $('#title_buttom').css('background-color');
$('.title_all').on('mouseover',function ()
{
$('#title_buttom').css('background-color','#FF0C55');
});
$('.title_all').on('mouseout',function ()
{
$('#title_buttom').css('background-color', color);
});
});