Code only works for one of the divs

Asked

Viewed 33 times

-1

Hello, I am starting to learn programming now and I need help to solve a little problem and I have a problem that I believe is easy to solve. This is the problem:

function Antes() {
    document.getElementById('ant').style.backgroundColor = "#c3c3c4";
}

function antes() {
    document.getElementById('ant').style.backgroundColor = "black";
}

function Depois() {
    document.getElementById('pro').style.backgroundColor = "#c3c3c4";
}

function depois() {
    document.getElementById('pro').style.backgroundColor = "black";
}

function Close() {
    document.getElementById('close').style.color = "#c3c3c4";
}

function fechar() {
    document.getElementById('close').style.color = "white";
}
<div class="lbox" id="img1">
    <div class="box_image"></div>
        <a href="#img6" class="btn" id="ant" onmousemove="Antes()" onmouseout="antes()">&#171;</a>
     <a href="#img2" class="btn" id="pro" onmousemove="Depois()" onmouseout="depois()">&#187;</a>
     <a href="" class="btn" id="close" onmousemove="Close()" onmouseout="fechar()">X</a>
     <img src="imagens/combate-ao-aedes-aegypti-2.jpg" alt="" id="imgm1">
    </div>


</div>

<div class="lbox" id="img2">
    <div class="box_image">
        <a href="#img1" class="btn" id="ant" onmousemove="Antes()" onmouseout="antes()">&#171;</a>
     <a href="#img3" class="btn" id="pro"  onmousemove="Depois()" onmouseout="depois()">&#187;</a>
     <a href="" class="btn" id="close" onmousemove="Close()" onmouseout="fechar()">X</a>
     <img src="imagens/dengue-cuidados.png" alt="" id="imgm2">
</div>

The intention is to make the a href change the background color when hover the mouse above

I managed with this code to perform this action in only with the "a href" of div#img1 (in the case of a#ant, a#pro and a#close of div#img1) but in the other div’s not.

javascript html css style
  • 1

    When you want to style something, it is strongly recommended to use only CSS for such an action, using as little Javascript as possible. What you want to do is possible using CSS only.

  • if using the pseudoclass : hover you won’t need anything javascript

1 answer

0

You can do this using only css:

.btn:hover {
   background-color: #c3c3c4
}

.btn-ant {
  background-color: black
}

.btn-pro {
  background-color: black
}

.btn-close {
  background-color: white
}
<div class="lbox" id="img1">
    <div class="box_image"></div>
    <a href="#img1" class="btn btn-ant">&#171;</a>
    <a href="#img3" class="btn btn-pro">&#187;</a>
    <a href="" class="btn btn-close">X</a>
    <img src="imagens/combate-ao-aedes-aegypti-2.jpg" alt="" id="imgm1">
</div>

<div class="lbox" id="img2">
    <div class="box_image">
    <a href="#img1" class="btn btn-ant">&#171;</a>
    <a href="#img3" class="btn btn-pro">&#187;</a>
    <a href="" class="btn btn-close">X</a>
    <img src="imagens/dengue-cuidados.png" alt="" id="imgm2">
</div>

For this, I used class names, to avoid using "ID", which should be unique, and for the "Mousemove" event I used the pseudoclass :hover, that is activated when the mouse is over the element.

Browser other questions tagged javascript html css style

You are not signed in. Login or sign up in order to post.