J'ai une bannière HTML ul qui a deux sous-barres li qui sont exposées en survol. Cependant, si vous le déplacez à partir d'une autre entrée principale, le survol est perdu.Style CSS de survol qui persiste après la souris
Je me demandais s'il y avait un moyen de maintenir facilement ce vol stationnaire après une souris. Ce n'est pas quelque chose que je peux jeter, je suis donc très intéressé à l'étendre pour pouvoir le garder même après une souris pendant quelques secondes, mais être capable de voir de nouvelles informations si je plante sur un élément li différent.
Voici mon jsFiddle avec une démonstration extrêmement simple avec mon HTML/CSS avec le strict minimum pour montrer la fonction: Je pense que JSFiddle
<body>
<div class="nav-outer-repeat">
<div class="nav">
<div class="table">
<ul class="select">
<li style="color: white;"> <a><b>Hover Test</b></a>
<div class="select_sub">
<ul class="sub">
<li style="color: white;"><a href="">Test</a>
</li>
<li style="color: white;"><a href="">Test</a>
</li>
<li style="color: white;"><a href="">Test</a>
</li>
</ul>
<ul class="sub">
<li style="color: white;"><a href="">Test</a>
</li>
<li style="color: white;"><a href="">Test</a>
</li>
<li style="color: white;"><a href="">Test</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div class="clear"></div>
<div id="content-outer">
<div id="content"></div>
</div>
#content-outer {
background: url(../../core/images/shared/content_repeat.jpg) repeat-x;
}
#content {
color: #333;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
margin: 0 auto 0 auto;
max-width: 100%;
min-width: 780px;
padding: 15px 0px 25px 0px;
}
.nav-outer-repeat {
background: url(../../core/images/shared/nav/repeat.jpg) repeat-x;
height: 77px;
}
.nav {
float: left;
font-family: Tahoma;
font-size: 13px;
height: 38px;
position: relative;
width: 1080px;
min-width: 600px;
z-index: 500;
}
.nav-divider {
background: url(../../core/images/shared/nav/divider.jpg) top no-repeat;
float: left;
height: 40px;
width: 15px;
}
.nav .select,
.nav .current {
display: table-cell;
float: left;
list-style: none;
margin: 0 0px 0 0;
padding: 0;
white-space: nowrap;
}
.nav li {
float: left;
height: auto;
margin: 0;
padding: 0;
}
.nav .select a {
color: #fff;
display: block;
float: left;
height: 37px;
line-height: 35px;
padding: 0 0px 0 0px;
text-decoration: none;
white-space: nowrap;
}
.nav .select_sub {
display: none;
margin: 0 0 0 10px;
}
.nav .sub {
display: table;
list-style: none;
padding: 0;
}
.nav .select :hover .select_sub,
.nav .current .show {
background: url(../../core/images/shared/nav/back_0.gif);
height: 75px;
display: block;
left: 0;
padding: 0;
position: absolute;
text-align: left;
top: 37px;
width: 1200px;
z-index: 100;
transition:0s 50s;
}
.nav .select :hover .sub li a,
.nav .current .show .sub li a {
background: transparent;
border: 0;
color: #fff;
font-weight: bold;
font-size: 13px;
display: block;
float: left;
margin: 0;
padding: 0 10px 0 10px;
white-space: nowrap;
}
.clear {
clear: both;
font-size: 0px;
height: 0;
line-height: 0px;
margin: 0px;
padding: 0px;
}
Je suis plus intéressé dans un certain délai, cela peut rester à l'écran, mais toutes mes tentatives ont échoué. J'espère que quelqu'un peut me donner quelques conseils pour résoudre ce problème avec certains CSS que je pourrais manquer, ou peut-être un peu de jQuery?
On dirait que cela a déjà été répondu ici: http://stackoverflow.com/questions/17100235/make-css-hover-state-remain-after-unhovering –
Je n'ai tout simplement pas été capable de reproduire complètement cela avec transitions dans mes tests, il n'y a que quelques lignes CSS, même en passant la transition: 5s; après tout, je ne vois pas de différence. –