У меня есть следующий HTML-код
<table style="position:relative; left: 10px; top:5px;">
<tr id="all_extended">
<td id="pucenas">
<img id="cenas"></img>
</td>
<td id="slide">
<div id="slider">
</div>
</td>
</tr>
</table>
и CSS
#slide{
height:100%;
border: none;
padding-left:20px;
display:none;
}
#slider{
border: none;
padding-left:30px;
background-color:green;
position:relative;
height:100%;
opacity:0;
width:0px;
overflow:hidden;
transition: width 10s linear 2s;
/* safari is webkit */
-webkit-transition:width 1s linear 2s;
transition: opacity 10s linear 2s;
/* safari is webkit */
-webkit-transition:opacity 1s linear 2s;
}
#cenas{
width:99%;
height:100%;
border: solid black 1px;
position:relative;
left: 0%;
}
#pucenas{
font-size: 0;
width:100px;
height:100px;
position:relative;
border: solid black 1px;
margin: 0px;
padding: 0px;
cursor:pointer;
}
#all_extended:hover #slide{
width: 200px;
display:inline;
}
Я действительно хочу, чтобы появилась зеленая вещь (#slide и #slider) при наведении на #all_extended. Я пробовал это много раз, но просто не могу заставить его работать (у меня было это на jquery). Вот эскиз о том, что я действительно хочу http://awwapp.com/s/99/5e/21.png. Любые идеи по этому поводу? Большое спасибо!
Если вы хотите навести курсор на коробке с черной рамкой и отобразить зеленую рамку, вы можете сделать это следующим образом:
#pucenas:hover + #slide {
display: table-cell;
}
+
- соседний селектор брата ; он выбирает «#slide» только в том случае, если это следующий брат после «#pucenas: hover», то есть стиль применяется только при наведении курсора на его брата. Одним из ограничений использования родного брата является то, что зеленый ползунок исчезнет, если вы переключитесь на него; использование дочернего селектора ( #all_extended > #slide
) было бы немного более плавным.