Skip to main content
se eliminaron 216 caracteres en el cuerpo
Origen Enlace
APRECode
  • 53
  • 1
  • 12
    <body>


 <div class="container">
    <div class="imgicon images1">
        <label class="textlarge icono-educ">
        <input type="radio" name="cajaradio" value="Educación" style="">
            <p class="textradio">Educación</p>
        </label>
    </div>

    <div class="imgicon images2">
        <label class="textlarge icono-empren">
        <input type="radio" name="cajaradio" value="Emprendimiento" style="">
            <p class="textradio1">Emprendimiento</p><head>
       <script <type="text/label>
   javascript" <src="js/div>
<jquery.min.js"></div>
    

script>
    <style>
           .images1
    {
     width: 80px;
     height: 80px;
     background-image: url('../icono'icono/educacionp.png');
     background-repeat: no-repeat;
     cursor: pointer;
    }
    .images1:hover
    {
     background-image: url('../icono'icono/educacion.png');
     cursor: pointer;
    }
    .clasehover
    {
    background-image: url('../icono'icono/educacion.png');
    }
  .images2
    {
     width: 80px;
     height: 80px;
     background-image: url('../icono'icono/Emprendimientop.png');
     background-repeat: no-repeat;
    }
    .images2:hover
    {
      background-image: url('../icono'icono/Emprendimiento.png'); 
    }
    .clasehover2
    {
      background-image: url('../icono'icono/Emprendimiento.png'); 
    }
    .container{
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      justify-content:center;
      flex-wrap: wrap;
    }
    .container p{
      margin-top:60px;
      font-size: 12px;
  cursor: pointer;
}
.imgicon{
  display: flex;
  justify-content: center;
  cursor: pointer;
   margin: 30px;
}
 .textlarge{
  display: flex;
}
.imgicon input{
   margin-top: 55px;
  displaymargin-left: flex;-30px;
}

    </style>
</head>

<body>

<div class="container">
    <div justify-content:class="imgicon center;images1">
      cursor: pointer; <label class="textlarge icono-educ">
       margin: 30px;<input type="radio" name="cajaradio" value="Educación" style="">
    }   
     .textlarge{ <p class="textradio">Educación</p>
      display: flex; </label>
    }</div>

    .imgicon<div input{class="imgicon images2">
      margin-top: 55px;
 <label class="textlarge icono-empren">
   margin-left: -30px;
    }<input type="radio" name="cajaradio" value="Emprendimiento" style="">
        <    <p class="textradio1">Emprendimiento</style>p>
        </label>
    </div>
</div>

<script>
 $('input[type="radio"]').click(function(){
    if ($(this).is(':checked'))
    //  var mensaje = $(this).val();
    {
      //alert("Seleccionaste: "+ mensaje);
        if( $('.images1').hasClass('clasehover'))
            {
                $('.images1').removeClass('clasehover');
                }
                    else{
                    $('.images1').addClass('clasehover');
                }
    }
  }); 
    </script>
        </body>
    <body>


 <div class="container">
    <div class="imgicon images1">
        <label class="textlarge icono-educ">
        <input type="radio" name="cajaradio" value="Educación" style="">
            <p class="textradio">Educación</p>
        </label>
    </div>

    <div class="imgicon images2">
        <label class="textlarge icono-empren">
        <input type="radio" name="cajaradio" value="Emprendimiento" style="">
            <p class="textradio1">Emprendimiento</p>
        </label>
    </div>
</div>
    


    <style>
           .images1
    {
     width: 80px;
     height: 80px;
     background-image: url('../icono/educacionp.png');
     background-repeat: no-repeat;
     cursor: pointer;
    }
    .images1:hover
    {
     background-image: url('../icono/educacion.png');
     cursor: pointer;
    }
    .clasehover
    {
    background-image: url('../icono/educacion.png');
    }
  .images2
    {
     width: 80px;
     height: 80px;
     background-image: url('../icono/Emprendimientop.png');
     background-repeat: no-repeat;
    }
    .images2:hover
    {
      background-image: url('../icono/Emprendimiento.png'); 
    }
    .clasehover2
    {
      background-image: url('../icono/Emprendimiento.png'); 
    }
    .container{
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      justify-content:center;
      flex-wrap: wrap;
    }
    .container p{
      margin-top:60px;
      font-size: 12px;
      cursor: pointer;
    }
    .imgicon{
      display: flex;
      justify-content: center;
      cursor: pointer;
       margin: 30px;
    }   
     .textlarge{
      display: flex;
    }
    .imgicon input{
      margin-top: 55px;
      margin-left: -30px;
    }  
        </style>
    
    


<script>
 $('input[type="radio"]').click(function(){
    if ($(this).is(':checked'))
    //  var mensaje = $(this).val();
    {
      //alert("Seleccionaste: "+ mensaje);
        if( $('.images1').hasClass('clasehover'))
            {
                $('.images1').removeClass('clasehover');
                }
                    else{
                    $('.images1').addClass('clasehover');
                }
    }
  }); 
    </script>
        </body>
<head>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <style>
        .images1
{
 width: 80px;
 height: 80px;
 background-image: url('icono/educacionp.png');
 background-repeat: no-repeat;
 cursor: pointer;
}
.images1:hover
{
 background-image: url('icono/educacion.png');
 cursor: pointer;
}
.clasehover
{
background-image: url('icono/educacion.png');
}
.images2
{
 width: 80px;
 height: 80px;
 background-image: url('icono/Emprendimientop.png');
 background-repeat: no-repeat;
}
.images2:hover
{
  background-image: url('icono/Emprendimiento.png'); 
}
.clasehover2
{
  background-image: url('icono/Emprendimiento.png'); 
}
.container{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content:center;
  flex-wrap: wrap;
}
.container p{
  margin-top:60px;
  font-size: 12px;
  cursor: pointer;
}
.imgicon{
  display: flex;
  justify-content: center;
  cursor: pointer;
   margin: 30px;
}
.textlarge{
  display: flex;
}
.imgicon input{
  margin-top: 55px;
  margin-left: -30px;
}

    </style>
</head>

<body>

<div class="container">
    <div class="imgicon images1">
        <label class="textlarge icono-educ">
        <input type="radio" name="cajaradio" value="Educación" style="">
            <p class="textradio">Educación</p>
        </label>
    </div>

    <div class="imgicon images2">
        <label class="textlarge icono-empren">
        <input type="radio" name="cajaradio" value="Emprendimiento" style="">
            <p class="textradio1">Emprendimiento</p>
        </label>
    </div>
</div>

<script>
 $('input[type="radio"]').click(function(){
    if ($(this).is(':checked'))
    //  var mensaje = $(this).val();
    {
      //alert("Seleccionaste: "+ mensaje);
        if( $('.images1').hasClass('clasehover'))
            {
                $('.images1').removeClass('clasehover');
                }
                    else{
                    $('.images1').addClass('clasehover');
                }
    }
  }); 
</script>
</body>
se añadieron 534 caracteres en el cuerpo
Origen Enlace
APRECode
  • 53
  • 1
  • 12

Tengo un problema para mantener el efecto hover, busco al hacer clic que la imagen mantenga el efecto hover, y si selecciono la otra imagen se remuevase quite el efecto hover de la primera imagen, y estala segunda imagen mantenga su efecto hover. Que funcione como un input tipo radio, en este caso las imágenesuna imagen se mantendrían seleccionadasmantendrá seleccionada. Educación

 
    <body>


 <div class="container">
    <div class="imgicon images1">
        <label class="textlarge icono-educ">
        <input type="radio" name="cajaradio" value="Educación" style="">
            <p class="textradio">Educación</p>
        </label>
    </div>

    <div class="imgicon images2">
        <label class="textlarge icono-empren">
        <input type="radio" name="cajaradio" value="Emprendimiento" style="">
            <p class="textradio1">Emprendimiento</p>
        </label>
    </div>
.images1{width: 80px;height: 80px;background-image: url('../icono/educacionp.png');background-repeat: no-repeat;cursor: pointer;}.images1:hover{background-image: url('../icono/educacion.png');cursor: pointer;}.clasehover{background-image: url('../icono/educacion.png');}

.images2 { width: 80px; height: 80px; background-image: url('../icono/Emprendimientop.png'); background-repeat: no-repeat; } .images2:hover { background-image: url('../icono/Emprendimiento.png'); } .clasehover2 { background-image: url('../icono/Emprendimiento.png'); }

/* Cambio */

.container{ margin: 0; padding: 0; list-style: none; display: flex; justify-content:center; flex-wrap: wrap; } .container p{ margin-top:60px; font-size: 12px; cursor: pointer; }

.imgicon{ display: flex; justify-content: center; cursor: pointer; margin: 30px; }

.textlarge{ display: flex; } .imgicon input{ margin-top: 55px; margin-left: -30px; }

</div>
    


    <style>
           .images1
    {
     width: 80px;
     height: 80px;
     background-image: url('../icono/educacionp.png');
     background-repeat: no-repeat;
     cursor: pointer;
    }
    .images1:hover
    {
     background-image: url('../icono/educacion.png');
     cursor: pointer;
    }
    .clasehover
    {
    background-image: url('../icono/educacion.png');
    }
  .images2
    {
     width: 80px;
     height: 80px;
     background-image: url('../icono/Emprendimientop.png');
     background-repeat: no-repeat;
    }
    .images2:hover
    {
      background-image: url('../icono/Emprendimiento.png'); 
    }
    .clasehover2
    {
      background-image: url('../icono/Emprendimiento.png'); 
    }
    .container{
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      justify-content:center;
      flex-wrap: wrap;
    }
    .container p{
      margin-top:60px;
      font-size: 12px;
      cursor: pointer;
    }
    .imgicon{
      display: flex;
      justify-content: center;
      cursor: pointer;
       margin: 30px;
    }   
    .textlarge{
      display: flex;
    }
    .imgicon input{
      margin-top: 55px;
      margin-left: -30px;
    }  
        </style>
    
    


<script>
 $('input[type="radio"]').click(function(){
    if ($(this).is(':checked'))
    //  var mensaje = $(this).val();
    {
      //alert("Seleccionaste: "+ mensaje);
        if( $('.images1').hasClass('clasehover'))
            {
                $('.images1').removeClass('clasehover');
                }
                    else{
                    $('.images1').addClass('clasehover');
                }
    }
  }); 
    </script>
        </body>

$('input[type="radio"]').click(function(){ if ($(this).is(':checked')) // var mensaje = $(this).val(); { //alert("Seleccionaste: "+ mensaje); if( $('.images1').hasClass('clasehover')) { $('.images1').removeClass('clasehover'); } else{ $('.images1').addClass('clasehover'); } } });

Tengo un problema para mantener el efecto hover, busco al hacer clic que la imagen mantenga el efecto hover, y si selecciono la otra imagen se remueva el efecto hover de la primera imagen y esta segunda imagen mantenga su efecto hover. Que funcione como un input tipo radio, en este caso las imágenes se mantendrían seleccionadas. Educación

 
<div class="imgicon images2">
    <label class="textlarge icono-empren">
    <input type="radio" name="cajaradio" value="Emprendimiento" style="">
        <p class="textradio1">Emprendimiento</p>
    </label>
</div>
.images1{width: 80px;height: 80px;background-image: url('../icono/educacionp.png');background-repeat: no-repeat;cursor: pointer;}.images1:hover{background-image: url('../icono/educacion.png');cursor: pointer;}.clasehover{background-image: url('../icono/educacion.png');}

.images2 { width: 80px; height: 80px; background-image: url('../icono/Emprendimientop.png'); background-repeat: no-repeat; } .images2:hover { background-image: url('../icono/Emprendimiento.png'); } .clasehover2 { background-image: url('../icono/Emprendimiento.png'); }

/* Cambio */

.container{ margin: 0; padding: 0; list-style: none; display: flex; justify-content:center; flex-wrap: wrap; } .container p{ margin-top:60px; font-size: 12px; cursor: pointer; }

.imgicon{ display: flex; justify-content: center; cursor: pointer; margin: 30px; }

.textlarge{ display: flex; } .imgicon input{ margin-top: 55px; margin-left: -30px; }

</style>


<script>

$('input[type="radio"]').click(function(){ if ($(this).is(':checked')) // var mensaje = $(this).val(); { //alert("Seleccionaste: "+ mensaje); if( $('.images1').hasClass('clasehover')) { $('.images1').removeClass('clasehover'); } else{ $('.images1').addClass('clasehover'); } } });

Tengo un problema para mantener el efecto hover, busco al hacer clic que la imagen mantenga el efecto hover, y si selecciono la otra imagen se se quite el efecto de la primera imagen, y la segunda imagen mantenga su efecto hover. Que funcione como un input tipo radio, en este caso una imagen se mantendrá seleccionada.

    <body>


 <div class="container">
    <div class="imgicon images1">
        <label class="textlarge icono-educ">
        <input type="radio" name="cajaradio" value="Educación" style="">
            <p class="textradio">Educación</p>
        </label>
    </div>

    <div class="imgicon images2">
        <label class="textlarge icono-empren">
        <input type="radio" name="cajaradio" value="Emprendimiento" style="">
            <p class="textradio1">Emprendimiento</p>
        </label>
    </div>
</div>
    


    <style>
           .images1
    {
     width: 80px;
     height: 80px;
     background-image: url('../icono/educacionp.png');
     background-repeat: no-repeat;
     cursor: pointer;
    }
    .images1:hover
    {
     background-image: url('../icono/educacion.png');
     cursor: pointer;
    }
    .clasehover
    {
    background-image: url('../icono/educacion.png');
    }
  .images2
    {
     width: 80px;
     height: 80px;
     background-image: url('../icono/Emprendimientop.png');
     background-repeat: no-repeat;
    }
    .images2:hover
    {
      background-image: url('../icono/Emprendimiento.png'); 
    }
    .clasehover2
    {
      background-image: url('../icono/Emprendimiento.png'); 
    }
    .container{
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      justify-content:center;
      flex-wrap: wrap;
    }
    .container p{
      margin-top:60px;
      font-size: 12px;
      cursor: pointer;
    }
    .imgicon{
      display: flex;
      justify-content: center;
      cursor: pointer;
       margin: 30px;
    }   
    .textlarge{
      display: flex;
    }
    .imgicon input{
      margin-top: 55px;
      margin-left: -30px;
    }  
        </style>
    
    


<script>
 $('input[type="radio"]').click(function(){
    if ($(this).is(':checked'))
    //  var mensaje = $(this).val();
    {
      //alert("Seleccionaste: "+ mensaje);
        if( $('.images1').hasClass('clasehover'))
            {
                $('.images1').removeClass('clasehover');
                }
                    else{
                    $('.images1').addClass('clasehover');
                }
    }
  }); 
    </script>
        </body>
se eliminaron 79 caracteres en el cuerpo
Origen Enlace
APRECode
  • 53
  • 1
  • 12

Tengo un problema para mantener el efecto hover cuando selecciono una imagen. El efecto no debe cambiar cuando se selecciona o se presiono fuera; en js logro almacenar en una variable "mensaje" lo seleccionado, pero no logrobusco al hacer clic que sela imagen mantenga el efecto hoverhover, y si selecciono la otra imagen se remueva el efecto hover de la primera imagen y esta segunda imagen mantenga su apoyo por favorefecto hover. Que funcione como un input tipo radio, estoy comenzando y les agradecería muchísimoen este caso las imágenes se mantendrían seleccionadas. Educación

 

<body>
        <div class="container">

            <div class="imgicon">
                <label class="textlarge icono-educ ">
                <input type="radio" name="cajaradio" value="Educación" style="display: none;">
                    <p class="textradio">Educación</p>
                </label>
            </div>

            <divclass="imgicon class="imgicon">images2">
                <label class="textlarge icono-empren">
                <input type="radio" name="cajaradio" value="Emprendimiento" style="display: none;">style="">
                    <p class="textradio1">Emprendimiento</p>
                </label>
            </div>

            <div class="imgicon">
                <label class="textlarge icono-gasmedi">
                <input type="radio" name="cajaradio" value="Gastos Medicos" style="display: none;">
                    <p class="textradio2">Gastos Medicos</p>
                </label>
            </div>


        </div>

<style>
        .icono-educ, .icono-empren, .icono-gasmedi{
    width: 80px;
    height: 80px;
    background-repeat: no-repeat;
    transition:all 900ms;
    margin: 30px;
}

[.icono-educ, .icono-empren, .icono-gasmedi]:hover{
    color: #1A237E;
    width: 80px;
    height: 80px;
    transition:all 900ms;
    margin: 30px;
}

.icono-educ{
    background-image: url('../icon/educ.png');  
}
.icono-educ:hover{
    background-image: url('../icon/educa.png');
}

.icono-empren{
    background-image: url('../icon/emprend.png');
}
.icono-empren:hover{
    background-image: url('../icon/emprendi.png');  
}

.icono-gasmedi{
    background-image: url('../icon/gastmed.png');
}
.icono-gasmedi:hover{
    background-image: url('../icon/gastmedi.png');
}
.images1{width: 80px;height: 80px;background-image: url('../icono/educacionp.png');background-repeat: no-repeat;cursor: pointer;}.images1:hover{background-image: url('../icono/educacion.png');cursor: pointer;}.clasehover{background-image: url('../icono/educacion.png');}

.images2 { width: 80px; height: 80px; background-image: url('../icono/Emprendimientop.png'); background-repeat: no-repeat; } .images2:hover { background-image: url('../icono/Emprendimiento.png'); } .clasehover2 { background-image: url('../icono/Emprendimiento.png'); }

/* Cambio */

.container{ margin: 0; padding: 0; list-style: none; display: flex; justify-content:center; flex-wrap: wrap; } .container p{ margin-top:60px; font-size: 12px; cursor: pointer; }

.imgicon{ display: flex; justify-content: center; cursor: pointer; margin: 30px; }

.textlarge{ display: flex; } .imgicon input{ margin-top: 55px; margin-left: -30px; }

</style>


<script>
    $(function(){
  $('input[type="radio"]').click(function(){
    if ($(this).is(':checked'))
        var mensaje = $(this).val();
    {
      alert("Seleccionaste: "+ mensaje);
    }
  });
});
</script>
        
    </body>

$('input[type="radio"]').click(function(){ if ($(this).is(':checked')) // var mensaje = $(this).val(); { //alert("Seleccionaste: "+ mensaje); if( $('.images1').hasClass('clasehover')) { $('.images1').removeClass('clasehover'); } else{ $('.images1').addClass('clasehover'); } } });

Tengo un problema para mantener el efecto hover cuando selecciono una imagen. El efecto no debe cambiar cuando se selecciona o se presiono fuera; en js logro almacenar en una variable "mensaje" lo seleccionado, pero no logro que se mantenga el efecto hover, su apoyo por favor, estoy comenzando y les agradecería muchísimo.

<body>
        <div class="container">

            <div class="imgicon">
                <label class="textlarge icono-educ ">
                <input type="radio" name="cajaradio" value="Educación" style="display: none;">
                    <p class="textradio">Educación</p>
                </label>
            </div>

            <div class="imgicon">
                <label class="textlarge icono-empren">
                <input type="radio" name="cajaradio" value="Emprendimiento" style="display: none;">
                    <p class="textradio1">Emprendimiento</p>
                </label>
            </div>

            <div class="imgicon">
                <label class="textlarge icono-gasmedi">
                <input type="radio" name="cajaradio" value="Gastos Medicos" style="display: none;">
                    <p class="textradio2">Gastos Medicos</p>
                </label>
            </div>


        </div>

<style>
        .icono-educ, .icono-empren, .icono-gasmedi{
    width: 80px;
    height: 80px;
    background-repeat: no-repeat;
    transition:all 900ms;
    margin: 30px;
}

[.icono-educ, .icono-empren, .icono-gasmedi]:hover{
    color: #1A237E;
    width: 80px;
    height: 80px;
    transition:all 900ms;
    margin: 30px;
}

.icono-educ{
    background-image: url('../icon/educ.png');  
}
.icono-educ:hover{
    background-image: url('../icon/educa.png');
}

.icono-empren{
    background-image: url('../icon/emprend.png');
}
.icono-empren:hover{
    background-image: url('../icon/emprendi.png');  
}

.icono-gasmedi{
    background-image: url('../icon/gastmed.png');
}
.icono-gasmedi:hover{
    background-image: url('../icon/gastmedi.png');
}
</style>


<script>
    $(function(){
  $('input[type="radio"]').click(function(){
    if ($(this).is(':checked'))
        var mensaje = $(this).val();
    {
      alert("Seleccionaste: "+ mensaje);
    }
  });
});
</script>
        
    </body>

Tengo un problema para mantener el efecto hover, busco al hacer clic que la imagen mantenga el efecto hover, y si selecciono la otra imagen se remueva el efecto hover de la primera imagen y esta segunda imagen mantenga su efecto hover. Que funcione como un input tipo radio, en este caso las imágenes se mantendrían seleccionadas. Educación

 

<div class="imgicon images2">
    <label class="textlarge icono-empren">
    <input type="radio" name="cajaradio" value="Emprendimiento" style="">
        <p class="textradio1">Emprendimiento</p>
    </label>
</div>
.images1{width: 80px;height: 80px;background-image: url('../icono/educacionp.png');background-repeat: no-repeat;cursor: pointer;}.images1:hover{background-image: url('../icono/educacion.png');cursor: pointer;}.clasehover{background-image: url('../icono/educacion.png');}

.images2 { width: 80px; height: 80px; background-image: url('../icono/Emprendimientop.png'); background-repeat: no-repeat; } .images2:hover { background-image: url('../icono/Emprendimiento.png'); } .clasehover2 { background-image: url('../icono/Emprendimiento.png'); }

/* Cambio */

.container{ margin: 0; padding: 0; list-style: none; display: flex; justify-content:center; flex-wrap: wrap; } .container p{ margin-top:60px; font-size: 12px; cursor: pointer; }

.imgicon{ display: flex; justify-content: center; cursor: pointer; margin: 30px; }

.textlarge{ display: flex; } .imgicon input{ margin-top: 55px; margin-left: -30px; }

</style>


<script>

$('input[type="radio"]').click(function(){ if ($(this).is(':checked')) // var mensaje = $(this).val(); { //alert("Seleccionaste: "+ mensaje); if( $('.images1').hasClass('clasehover')) { $('.images1').removeClass('clasehover'); } else{ $('.images1').addClass('clasehover'); } } });

Origen Enlace
APRECode
  • 53
  • 1
  • 12
Loading