All geek questions in one place

How to change the background image of a body when hovering over a menu item?

I have a menu, and I need to change the body background to a different image for each menu item. In addition, it would be nice if it disappeared or bounced, or did something nice and clean, changing.

So far I have this code:

    var $body = $('body');
    $('li:first-child').hover(function(){
        $body.css('background-image', 'url("img/dd.jpg")');
    }, function() {
        $body.css('background-image', '')
    })

html

<div id="main-menu-container">
    <ul>
       <li><a><span>One</span></a></li>

       <li><a><span>Two</span></a></li>

       <li><a><span>Three</span></a></li>      
    </ul>
</div>

How to continue and add animation?

+4
source share
4 answers

You can simply select the elements in which you want to change the background.

var $body = $('body');
$('#main-menu-container li a').hover(function(){
    $body.css('background', 'red');
}, function() {
    $body.css('background', '')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-menu-container">
  <ul>
    <li><a href="#"><span>One</span></a></li>
    <li><a href="#"><span>Two</span></a></li>
    <li><a href="#"><span>Three</span></a></li>      
  </ul>
</div>
Run codeHide result

If you need a different background, you need to store them somehow. It can be as an attribute datain the menu, or create an object, save images or something else.

var $body = $('body');
var colors = ['#f00', '#f0f', '#0f0'];

$('#main-menu-container li a').hover(function(){
    $body.css('background', colors[$(this).parent().index()]);
}, function() {
    $body.css('background', '')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-menu-container">
  <ul>
    <li><a href="#"><span>One</span></a></li>
    <li><a href="#"><span>Two</span></a></li>
    <li><a href="#"><span>Three</span></a></li>      
  </ul>
</div>
Run codeHide result
+2
source

z-index:-1 position:fixed. . HTML:

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="mystyle.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="myscript.js"></script>
    </head>
    <body>
    <div class = "images-container">
        <img src="img1.jpg">
        <img src="img2.jpg">
        <img src="img3.jpg">
        <img src="img0.jpg">
    </div>
    <ul id = "main-menu-container">
        <li><a><span>One</span></a></li>
       <li><a><span>Two</span></a></li>
       <li><a><span>Three</span></a></li>
    </ul>
    </body>
</html>

CSS:

div.images-container img{
    z-index: -1;
    position: fixed;
    width:1600px;
    height: 900px;
}

ul#main-menu-container{
    position: relative;
    top:50px;
}

ul#main-menu-container li{
    font-weight: 500;
    font-family: sans-serif;
    background: #ed2389;
    border-color: #fff;
    border-width: 1px;
    float: left;
    color: white;
    list-style: none;
    padding: 8px;
    border-style: solid;
    border-collapse: collapse;
}

ul#main-menu-container li:hover{
    background: #fff;
    color: #ed2389;
    border-color: #ed2389;
}

JavaScript:

$(function() {
    $("div.images-container img").fadeOut(0);
    $("div.images-container img").last().fadeIn(0);
    $("#main-menu-container").hover(function(){
        $("div.images-container img").last().fadeToggle(500);
    });
    $("#main-menu-container li").hover(function(e) {
        var $target = $(e.target);
        var $menu = $("#main-menu-container li");
        var index = $menu.index($target);
        var $images = $("div.images-container img");
        $images.eq(index).fadeToggle(500);
    });
});

, , . . : https://jsfiddle.net/eoppskvL/

P.S. , .

0

Okey, . !

html

<div id="main-menu-container">
    <ul>
        <li><a href="#"><span>One</span></a></li>
        <li><a href="#"><span>Two</span></a></li>
        <li><a href="#"><span>Three</span></a></li>
    </ul>
</div>

CSS

body {
    background: url("../img/back.png");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-transition: background ease-in 1s;
    -moz-transition: background ease-in 1s;
    -o-transition: background ease-in 1s;
    transition: background ease-in 1s;
}

.background-0 {
background: url("../img/dd.jpg");
}
.background-1 {
background: url("../img/dd.jpg");
}
.background-2 {
    background: url("../img/dd.jpg");
}

script

var list_elements = $('ul li');
var current_index = null;
list_elements.on('mouseenter', function() {
    current_index = list_elements.index(this);
    $('body').addClass('background-' + current_index);

}).on('mouseleave', function(){
    $('body').removeClass('background-' + current_index);
    current_index = null;
});
0

, . , :after.

-1
source

Source: https://habr.com/ru/post/1652015/

More articles:


All Articles