Hogyan tudom alkalmazni itt a hover effectet?
Sziasztok van két divem az egyik egy doboz a másik egy három szög.
És azt szeretném megoldani,ha beleviszem a dobozba az egeret csak akkor jelenjen meg a háromszög div ezt hogy oldhatom meg css-ben?
Ehhez inkább jQuery-t hsználnék de siam css-el is meglehet.
csinálsz egy div-et aminek alp helyzete display: none; ha ráviszi az egeret a te szog divedre akkor hover-ben a display: block-ra állitod.
Én kb. így csinálnám:
<html>
<head>
<title> New Document </title>
<link href="stilus.css" rel="stylesheet">
<script src=" [link]
<script>
$(document).ready(function() {
$('#doboz').hover(
function() {
$('#szog').css('display','block');
},
function() {
$('#szog').css('display','none');
}
);
});
</script>
<style>
#doboz {
width: 300px;
margin: 0 auto;
position: relative;
}
#box {
background: black;
width: 300px;
min-height: 200px;
margin: 30px auto;
color: white;
}
#szog {
position: absolute;
top: -30;
left: 20px;
z-index: -1;
width: 0;
height: 0;
border-bottom: 100px solid black;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
display: none;
}
</style>
</head>
<body>
<div id="doboz">
<div id="szog"></div>
<div id="box"></div>
</div>
</body>
</html>
és egy jótanács: a kódodban a #szog div más-más felbontáson teljesen más helyen jelenhet meg mint ahogy azt te szeretnéd, csak állítgasd a böngésződ méretét, és egyből látni fogod a hézagot. A margin-okra figyelj, és teszteld több felbontáson is.
Lehet egy két kérdésem css-sel kapcsolatban?
#doboz position: relative; minek relative?
#szog position: absolute; minek absolute?
a z-index: -1; minek ez mit takar?
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!