1

al pasar el mouse en la option menu attack se le agregar los arrows correspondiente pero lo que no me gusta es que me modifica la tipografia y no quiero eso ¿como puedo resolver este problema sin que este mismo se modifique?

Codigo del problema:

$(document).ready(() => {
     const music = new Audio('#');
     //music.play();
     //music.loop = true;
     //music.playbackRate = 2;
     //music.pause();
     //CARACTER
     const abomasnow = $('#abomasnow');
     const pikachu = $('#pikachu');
     $('.table_comments').html(`<p>PIKACHU:Hm.<br>
                What move?</p>`);
     const select = $('.table_option p');
     for (let i = 0; i < select.length; i++) {
         $(select[i]).mouseenter(() => {
             $(select[i]).addClass('fas fa-caret-right');
         });
         $(select[i]).mouseleave(() => {
             $(select[i]).removeClass('fas fa-caret-right');
         });
         $(select[i]).click(() => {
             if (select[i] == select[0]) {
                 alert('opcion 1');
             }
         });
     }
 });
@import url('http://fonts.cdnfonts.com/css/pokemon-fire-red');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.stadium div.enemy div.power_abomasnow,
.stadium div.user div.power_pikachu {
    background: #fff;
    border: 3px solid #4f5d46;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 6px;
    width: 100%;
    max-width: 180px;
    height: auto;
    padding: 10px;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.stadium div.enemy div.power_abomasnow .name,
.stadium div.user div.power_pikachu .name {
    width: 100%;
    max-width: 150px;
    display: flex;
    justify-content: space-between;
}

.stadium div.enemy div.power_abomasnow .name p,
.stadium div.user div.power_pikachu .name p {
    font-size: 12px;
    margin-bottom: 5px;
}

.stadium {
    background: url('https://i.ibb.co/mvvkjMf/grass.png') no-repeat center;
    background-size: cover;
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    font-family: 'Pokemon Fire Red', sans-serif;
}

.stadium div.enemy img#abomasnow {
    position: absolute;
    top: 80px;
    right: 80px;
}

.stadium div.enemy div.power_abomasnow {
    top: 10px;
    left: 10px;
}

.stadium div.enemy div.power_abomasnow .hp {
    width: 150px;
    height: 10px;
    border: 1px solid #4f5d46;
}

.stadium div.enemy div.power_abomasnow .hp .point {
    width: 55%;
    height: 8px;
    background: #70e6aa;
}

.stadium div.user img#pikachu {
    position: absolute;
    bottom: 0;
    left: 60px;
}

.stadium div.user div.power_pikachu {
    bottom: 10px;
    right: 10px;
}

.stadium div.user div.power_pikachu .hp {
    width: 150px;
    height: 10px;
    border: 1px solid #4f5d46;
}

.stadium div.user div.power_pikachu .hp .point {
    width: 75%;
    height: 8px;
    background: #70e6aa;
}

.stadium .table_window {
    width: 100%;
    height: auto;
    background: #4f5d46;
    position: absolute;
    top: 100%;
    padding: 4px;
}

.stadium .table_window .table_comments {
    width: 100%;
    border: 3px solid #c8aa4a;
    border-radius: 4px;
    background: #245064;
    color: #fff;
    padding: 10px;
}

.stadium .table_window .table_option {
    width: inherit;
    max-width: 200px;
    height: inherit;
    padding: 8px;
    border-radius: 4px;
    border: 3px solid #706880;
    background: #fff;
    position: absolute;
    top: 0;
    right: 0;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Battle</title>
        <link rel="stylesheet" href="css/styles.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    </head>
    <body>
        <div class="stadium">
            <div class="enemy">
                <img src="https://i.ibb.co/MSdnshz/abomasnow.gif" id="abomasnow">
                <div class="power_abomasnow">
                    <div class="name">
                        <p>ABOMASNOW</p><p>Lv15</p>
                    </div>
                    <div class="hp">
                        <div class="point"></div>
                    </div>
                </div>
            </div>
            <div class="user">
                <img src="https://i.ibb.co/3NvdgK0/pikachu.gif" id="pikachu">
                <div class="power_pikachu">
                    <div class="name">
                        <p>PIKACHU</p><p>Lv13</p>
                    </div>
                    <div class="hp">
                        <div class="point"></div>
                    </div>
                </div>
            </div>
            <div class="table_window">
                <div class="table_comments"></div>
                <div class="table_option">
                    <p> FIGHT</p>
                    <p> BAG</p>
                    <p> POKéMON</p>
                    <p> RUN</p>
                </div>
            </div>
        </div>
    </body>
</html>

1
  • 1
    Ya que usas Fontawesome, por qué mejor no añades los iconos como dicha página te lo sugiere? Con elementos i, por ejemplo:<i class="fab fa-500px"></i>. Y así los puedes diferenciar fácilmente de los p
    – Mateo
    el 10 jul. 2021 a las 5:29

1 respuesta 1

1

Dentro de .table-option podés colocar elementos i

<div class="table_option">
    <p><i></i> FIGHT</p>
    <p><i></i> BAG</p>
    <p><i></i> POKéMON</p>
    <p><i></i> RUN</p>
</div>

Luego cambias la clase de éstos modificando los selectores de las líneas 15 y 18 a:

$(select[i]).children("i").addClass('fas fa-caret-right');
$(select[i]).children("i").removeClass('fas fa-caret-right');

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.