Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » Al momento de pasar sobre el numero con hover no me aparece la imagen

CSS - Al momento de pasar sobre el numero con hover no me aparece la imagen

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 1
Ha aumentado su posición en 64 puestos en CSS (en relación al último mes)
Gráfica de CSS

Al momento de pasar sobre el numero con hover no me aparece la imagen

Publicado por morxlityvsxcks (1 intervención) el 01/02/2019 22:58:04
Al momento de pasar sobre el numero con hover no me aparece la imagen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
 
 
.fecha1:hover{
background: red;
}
 
.img1{
	background-image: url('img/jhon.jpg');
	display: none;
	width: 100px;
	height: 100px;
	background-size: 100% 100%;
	position: absolute;
}
 
.fecha1:hover + .img1{
	display: block;
}
 
	</style>
 
</head>
<body>
 
	<div class="img1"></div>
 
<div id="contenedor1">
 
 
    <div class="mes1">
        <p class="centrar1">Enero</p>
    </div>
 
    <table>
        <tr>
            <th>D</th>
            <th>L</th>
            <th>M</th>
            <th>M</th>
            <th>J</th>
            <th>V</th>
            <th>S</th>
        </tr>
        <tr>
            <td style="padding-left: 2px;">1</td>
            <td style="padding-left: 2px;">2</td>
            <td style="padding-left: 2px;">3</td>
            <td class="fecha1" style="padding-left: 2px;">4</td>
            <td style="padding-left: 2px;">5</td>
            <td style="padding-left: 2px;">6</td>
            <td style="padding-left: 2px;">7</td>
        </tr>
        <tr>
            <td style="padding-left: 2px;">8</td>
            <td style="padding-left: 2px;">9</td>
            <td>10</td>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>15</td>
            <td>16</td>
            <td>17</td>
            <td>18</td>
            <td>19</td>
            <td>20</td>
            <td>21</td>
        </tr>
        <tr>
            <td>22</td>
            <td>23</td>
            <td>24</td>
            <td>25</td>
            <td>26</td>
            <td>27</td>
            <td>28</td>
        </tr>
        <tr>
            <td>29</td>
            <td>30</td>
            <td>31</td>
        </tr>
    </table>
 
</div>
</body>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Xavi
Val: 560
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Al momento de pasar sobre el numero con hover no me aparece la imagen

Publicado por Xavi (33 intervenciones) el 02/02/2019 23:13:43
Para hacer lo que quieres hacer, el segundo elemento tiene que estar a continución del primero...

1
2
3
4
5
6
#a:hover + #b {

    background: #ccc

}
 
<div id="a">Div A</div>
<div id="b">Div B</div>

y si tiene algun elemento en medio, tienes que utilizar ~
1
2
3
4
5
6
7
8
9
a:hover ~ #b {

    background: #ccc

}
 
<div id="a">Div A</div>
<div>random other elements</div>
<div>random other elements</div>
<div>random other elements</div>
<div id="b">Div B</div>

La mejor manera para hacer lo que tu quieres, es utilizar javascript o jquery... algo así:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
	<style type="text/css">
 
.fecha1:hover{
background: red;
}
 
.img1{
	background-image: url('img_01.jpg');
	display: none;
	width: 100px;
	height: 100px;
	background-size: 100% 100%;
	position: absolute;
}
 
	</style>
 
</head>
<body>
 
<div id="contenedor1">
 
    <div class="img1"></div>
 
 
    <div class="mes1">
        <p class="centrar1">Enero</p>
    </div>
 
    <table>
        <tr>
            <th>D</th>
            <th>L</th>
            <th>M</th>
            <th>M</th>
            <th>J</th>
            <th>V</th>
            <th>S</th>
        </tr>
        <tr>
            <td style="padding-left: 2px;">1</td>
            <td style="padding-left: 2px;">2</td>
            <td style="padding-left: 2px;">3</td>
            <td class="fecha1" style="padding-left: 2px;">4</td>
            <td style="padding-left: 2px;">5</td>
            <td style="padding-left: 2px;">6</td>
            <td style="padding-left: 2px;">7</td>
        </tr>
        <tr>
            <td style="padding-left: 2px;">8</td>
            <td style="padding-left: 2px;">9</td>
            <td>10</td>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>15</td>
            <td>16</td>
            <td>17</td>
            <td>18</td>
            <td>19</td>
            <td>20</td>
            <td>21</td>
        </tr>
        <tr>
            <td>22</td>
            <td>23</td>
            <td>24</td>
            <td>25</td>
            <td>26</td>
            <td>27</td>
            <td>28</td>
        </tr>
        <tr>
            <td>29</td>
            <td>30</td>
            <td>31</td>
        </tr>
    </table>
 
</div>
</body>
</html>
 
<script>
$(function() {
  $('.fecha1').hover(function() {
      console.log("K");
    $('.img1').show();
  }, function() {
    // on mouseout, reset the background colour

    $('.img1').hide();
  });
});
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar