Question

我需要你的帮助：

我有一个网站，我希望在将鼠标悬停在菜单上时更改bg-coler（就像在rhcp网站上一样），我已经尝试了jquery但它没有用..

（为了清楚起见，我不想改变包含我的菜单的div容器的背景颜色它应该是整个身体..--＆gt;代码）

谢谢！

代码：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

<script type="text/javascript">
    $('.start').hover(function () {
        $('html').css('background-color', '#676767')
    });
</script>

<?php include_once 'template.php' ?>

<title>Maximilian Braun</title>
</head>

<body>
    <div class="start">
        <h1>
            <a href="actor.php" >Schauspieler</a> - <a href="foto.php">Fotograf</a>
        </h1>
    </div>
    <?php echo footer();?>
</body>

Answer 1

尝试将代码包装在document's ready处理程序

中

$(function(){
 $('.start').hover(function(){$('html').css('background-color','#676767') } );
});

由于Jquery在相关元素未加载时无法识别具有类start的元素。

Answer 2

快速回答+解释

您的代码无效，因为您在文档加载完成之前使用了jQuery，始终使用以下代码包装代码：

$(document).ready(function(){
    //your code goes here
}

或：

$(function(){
    //your code goes here
}

只需使用Rajaprabhu建议：

$(function(){
 $('.start').hover(function(){
   $('html').css('background-color','#676767') } );
});

让颜色动画

然而RHCP website不仅会改变颜色，还会激活此更改。 jQuery无法为颜色设置动画。您可以通过两种方式解决此问题。一种是使用jQuery插件，另一种是使用CSS过渡。

插件

如果你导入像jQuery Color这样的插件，你可以使用：

$(function(){
 $('.start').hover(function(){
   $('html').animate({backgroundColor: '#676767') } );
});

CSS过渡

除了使用插件处理动画外，您还可以使用CSS动画，它将负责在更改颜色值之间进行转换。

使用原始代码：

$(function(){
 $('.start').hover(function(){
   $('html').css('background-color','#676767') } );
});

并使用以下CSS

.start {
   -webkit-transition: background-color 0.3s ease-out;  /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
           transition: background-color 0.3s ease-out;  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */
}

PS：如果您使用CSS过渡，请注意IE 9及以下版本不支持CSS过渡。

Answer 3

您的代码应该在dom ready中

$(function() {
        $('.start').hover(function(){$('html').css('background-color','#676767') } );
});

Answer 4

你应该在DOM准备就绪时调用它，所以把它放在$(function()..里面，并将;放在$('html').css('background-color','#676767')的末尾。

$(function(){
    $('.start').hover(function(){$('html').css('background-color','#676767'); } );
});

<强> Demo

Answer 5

通过使用.ready（处理程序），您可以解决问题：以下所有三种语法都是等效的：

- $( document ).ready( handler )
- $().ready( handler ) (this is not recommended)
- $( handler )

$（document）.ready（function（$）{

$('.start').hover(function(){$('html').css('background-color','#676767') } );

}）;

如何通过jquery更改背景颜色？

5 个答案: