Make effect of Houver with jquery transiting between elements

Asked

Viewed 39 times

0

I am trying to make an effect that by hovering the mouse over an element, if it is not selected; display the effect, in my case a text color change. Unfortunately, I’m having some difficulty. I left my code below to take a look, it is executable, so you can see how that is the result.

// Variáveis indicadoras
var tabselect = 'main'

// Variáveis de fora (css, html...)
settingsbtn = document.getElementById('settingsbtn')
mainbtn = document.getElementById('mainbtn')


telaprincipal = document.getElementById('showarea')
decoraçãocima = document.getElementById('showareatop')


// #settingsbtn:hover{
//    color: #00d2ff;
//    transition: all .3s;
//}

// Manipulação

settingsbtn.addEventListener('click', ()=>{
    tabselect = 'settings'; // Mudando seleção de abas para settings

    // Muda a ordem de cores de fundo dos botões
    settingsbtn.style.backgroundColor = '#2b2b2b'
    mainbtn.style.backgroundColor = '#424242'
})

mainbtn.addEventListener('click', ()=>{
    tabselect = 'main';

    // Muda a ordem de cores de fundo dos botões
    settingsbtn.style.backgroundColor = '#424242'
    mainbtn.style.backgroundColor = '#2b2b2b'

})

if(tabselect === 'main'){

  // Aplicando efeito hover

    $('#mainbtn').mouseover(function(){
        $('#mainbtn').css({
        'color': 'white',
        'transition': 'all .3s'
        })
      });

    $('#settingsbtn').mouseover(function(){
        $('#settingsbtn').css({
        'color': '#00d2ff',
        'transition': 'all .3s'
        })
      });

      $('#settingsbtn').mouseleave(function(){
        $('#settingsbtn').css({
        'color': '',
        'transition': 'all .3s'
        })
      });

}else{

    $('#settingsbtn').mouseover(function(){
        $('#settingsbtn').css({
        'color': 'white',
        'transition': 'all .3s'
        })
      });

      $('#mainbtn').mouseover(function(){
        $('#mainbtn').css({
        'color': '#00d2ff',
        'transition': 'all .3s'
        })
      });

      $('#mainbtn').mouseleave(function(){
        $('#mainbtn').css({
        'color': '',
        'transition': 'all .3s'
        })
      });

}
*{
    box-sizing: border-box;
    overflow-y: hidden;
}

html, body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;   
}


#mainbtn{
    width: 70px;
    height: 22px;
    border: none;
    font-weight: bold;
    font-family: poppins,sans-serif;
    background-color: #2b2b2b;
    color: white;
    text-transform: uppercase;
    z-index: 1001;
}

#settingsbtn{
    width: 75px;
    height: 22px;
    border: none;
    font-weight: bold;
    font-family: poppins,sans-serif;
    background-color: #424242;
    color: white;
    text-transform: uppercase;
    z-index: 1001;
}


#showarea{
    width: 100%;
    height: 100%;
    margin-top: 0px;
    z-index: 1000;
    background-color: #2b2b2b;

}

#showareatop{
    width: 100%;
    height: 22px;
    margin-top: 0px;
    z-index: 999;
    background-color: #242424;

}
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./src/style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <title>ManwhaPing</title>
</head>
<body>

    <div id="showareatop">
        <button id="mainbtn">Main</button>
        <button id="settingsbtn">Settings</button>   
    </div>

    <div id="showarea"></div>

    <script src="./src/script.js"></script>
</body>
</html>

javascript jquery front-end

1 answer

0

I think you are complicating a lot, I have simplified your javascript. I have created 2 new classes selecionado and naoSelecionado, applied the styles css that you wanted. In JS has a event listnerto detect the click in class naoSelecionado, and so exchange the class’s between the buttons. See below the example:

$('#showareatop').on('click', '.naoSelecionado', function() {
  $('.selecionado').addClass('naoSelecionado').removeClass('selecionado');
  $(this).addClass('selecionado').removeClass('naoSelecionado');
});
* {
  box-sizing: border-box;
  overflow-y: hidden;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#mainbtn {
  width: 70px;
  height: 22px;
  border: none;
  font-weight: bold;
  font-family: poppins, sans-serif;
  background-color: #2b2b2b;
  color: white;
  text-transform: uppercase;
  z-index: 1001;
}

#settingsbtn {
  width: 75px;
  height: 22px;
  border: none;
  font-weight: bold;
  font-family: poppins, sans-serif;
  background-color: #424242;
  color: white;
  text-transform: uppercase;
  z-index: 1001;
}

#showarea {
  width: 100%;
  height: 100%;
  margin-top: 0px;
  z-index: 1000;
  background-color: #2b2b2b;
}

#showareatop {
  width: 100%;
  height: 22px;
  margin-top: 0px;
  z-index: 999;
  background-color: #242424;
}

.selecionado {
  background-color: #2b2b2b!important;
}

.naoSelecionado {
  background-color: #424242!important;
}

.naoSelecionado:hover {
  color: #00d2ff!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./src/style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <title>ManwhaPing</title>
</head>

<body>

  <div id="showareatop">
    <button id="mainbtn" class="selecionado">Main</button>
    <button id="settingsbtn" class="naoSelecionado">Settings</button>
  </div>

  <div id="showarea"></div>


</body>

</html>

Browser other questions tagged javascript jquery front-end

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