Question

我仍然希望在跨度悬停时更改背景图像。如果有人可以帮助我。我在下面提供了该网站的完整代码。

以下是该网站的完整代码。

Answer 1

查看jquery .hover();和.css();或.hover();以及.addClass();和.removeClass();。这应该会给你你正在寻找的东西。你甚至可以投入.animate();使其变得不那么残酷。

这是一个小例子：

JQUERY：

$(function(){

  $('.text1').hover(function(){
    $('body').css('background-color', 'blue');
  });

});

将此代码放在一个名为＆＃39; what-want-want.js＆＃39;的文件中。并使用<head>标记将其包含在html <script src="anything-you-want.js">部分的顶部，以将其链接到您创建的新js文件。此外，如果您使用.css();，例如，请确保在您的css中为您的身体提供background-color，否则它将无效。另外，请确保在html <head>标记内链接JQuery库，就像您为what-want-js文件所做的那样。这是它的链接.. Jquery Library

编辑:(添加了动画）

$(function(){

  $('.text1').hover(function() {
    $('body').stop().animate({
      backgroundColor:'rgb(255, 60, 0)'
    }, 300);
  }, function () {
    $('body').stop().animate({
      backgroundColor:'rgb(134, 33, 0)'
    }, 100);
  });

});

Answer 2

如果您使用的是纯JS，请结帐onmouseover。您可以在此W3 site上阅读。

In HTML:
<element onmouseover="myScript">

In JavaScript:
object.onmouseover=function(){myScript};

In JavaScript, using the addEventListener() method:
object.addEventListener("mouseover", myScript);

Answer 3

使用JQuery或Javascript执行此操作的最佳方法。

<html>
    <head>
        <style type = "text/css">
            body
            {
                background: url(http://www.programmingfacts.com/wp-content/uploads/2015/01/change-parent-bg-color-hover-child.jpg) no-repeat fixed;
            }

            h1: hover
            {
                background: url(back6.jpg) no-repeat center center fixed;
            }
            .hover
              {
                background-image: url('http://s5.postimg.org/8jj7nydhz/Background_main.jpg');
              }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript">
          $(document).ready(function() {
            $('h1').hover(function() {
                $('body').addClass('hover');
            }, function(){
                $('body').removeClass('hover');
            });
          });
        </script>
    </head>
    <body>
        <h1>
            Future Text.<br>
            <span class="text1">Text1</span>, <span class="text2">Text2</span>, <span class="text3">Text3</span>, <span class="text4">Text4</span>.
        </h1>
    </body>
</html>

Answer 4

＆＃13;

.test{
background-image:     url("https://www.planwallpaper.com/static/images/background-wallpapers-32_NRz0mTd.jpg");

}

＆＃13;

<div class="test">
<form action="search.php" method="GET">
    <input type="text" name="query" />
    <input type="submit" value="Search" />
</form>
</div>

＆＃13;

}
enter code here

悬停的CSS背景

4 个答案: