how I change the backgroung of a higher div when I pass over the menu

Question

how I change the backgroung of a higher div when I pass over the menu

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I'm trying to make a dynamic menu that changes the bg of a page.

But I have problems that I change the background if I do it with the general background of the page if it comes out, but in a div, no.

function menu_id(id){
      document.getElementsByClassName("bg001").className=("fondo"+id);
}

body    {
  

font: 18px Arial, Tahoma;
    color:  #b7a687;

}
.bg001   {
 background: url("file:///H:\img1.jpg") 
      no-repeat center center fixed;
        background-size: cover;
        -moz-background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;

    -webkit-transition: width 0.5s; /* For Safari 3.1 to 6.0 */
    transition: background 0.5s;
       -webkit-transition-timing-function: linear;
    -moz-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    transition-timing-function: linear;
    height:99vh;
}
.fondo1 {
 background: url("file:///H:\img1.jpg") 
      no-repeat center center fixed;
             background-size: cover;
        -moz-background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        
}
.fondo2 {
 background: url("file:///H:\img2.jpg") 
      no-repeat center center fixed;
            background-size: cover;
        -moz-background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
}
.fondo3 {
 background: url("file:///H:\img3.jpg") 
      no-repeat center center fixed;
          background-size: cover;
        -moz-background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
}
    .fondo4 {
     background: url("file:///H:\img4.jpg") 
          no-repeat center center fixed;
         background-size: cover;
        -moz-background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
}
    

    .interior{
        background: #fff;
          position: absolute;
        padding-top: 5px;
    top: 0;
    bottom: 0;
    left: 50%;
    right: 0;
    width: 50%;
    height: 284px;
    margin: auto;
    }
    .aqs{
        margin: 15px;
        padding-left: 20px;
      
        line-height: 52px;
        cursor:pointer; cursor: hand;
        transition: margin 1s, background 1s;
    }
    .aqs:hover{
      
    }
       .cli{
            width: 3%;
    background: url("file:///H:\linea.svg")
    center bottom fixed;
    -webkit-transition: width 0.5s; /* For Safari 3.1 to 6.0 */
    transition: width 0.5s background 0.5s;
           
    }
   .cli:hover{
        width: 100%;

    }
    span{
        background: #fff   ;
     padding: 15px 20px 15px 10px;
       
    }

<html>
<head>


</head>
<body>
<div class="bg001">

<div class="interior">
<div id="1" class="aqs" onmouseenter="menu_id(id)"><div class="cli"><span>item1</span></div></div>
<div id="2" class="aqs" onmouseenter="menu_id(id)"><div class="cli"><span>item2</span></div></div>
<div id="3" class="aqs" onmouseenter="menu_id(id)"><div class="cli"><span>item3</span></div></div>
<div id="4" class="aqs" onmouseenter="menu_id(id)"><div class="cli"><span>item4</span></div></div>
</div>
</div>
</body>
</html>

javascript html css

asked by xamla22 23.08.2018 в 07:25

source

2 answers

How to find the path of a file in windows with Python Error: the object does not have an attribute [closed]

score 1 · Answer 1

This should work to do what you want, just replace what is necessary to match your particular case

function fondo(id) {
  document.getElementById("fondo").className = "fondo0 fondo" + id;
}

.fondo0 {
  background: black;
}

.fondo1 {
  background: blue;
}

.fondo2 {
  background: red;
}

.fondo3 {
  background: brown;
}

.fondo4 {
  background: yellow;
}

<div id="fondo" class="fondo0">
  <button onmouseenter="fondo(1)">fondo1</button><br><br>
  <button onmouseenter="fondo(2)">fondo2</button><br><br>
  <button onmouseenter="fondo(3)">fondo3</button><br><br>
  <button onmouseenter="fondo(4)">fondo4</button><br><br>


</div>

score 0 · Answer 2

It does not work for you because this is not doing well: onmouseenter="menu_id(id)" You are using the id of the tag as if it were a variable and that does not work like that. Leave it as onmouseenter="menu_id()" and then you can do something like this:

document.getElementsByClassName("bg001").className=("fondo"+this.id);

Peer will not work because you change the name of the class and you can not re-select it with getElementsByClassName("bg001") , so it's best to select it by its id and change its class.

document.getElementById("bg").className=("fondo"+this.id);