Сделать зеленую вкладку на hover div с чистым CSS

0

У меня есть следующий 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. Любые идеи по этому поводу? Большое спасибо!

  • 0
    так что вы наводите курсор на один из черных ящиков (как на изображении, которое вы предоставили), а затем должно появиться зеленое поле рядом с ним?
  • 0
    пока не знаете, парни?
Теги:

1 ответ

1
Лучший ответ

Если вы хотите навести курсор на коробке с черной рамкой и отобразить зеленую рамку, вы можете сделать это следующим образом:

#pucenas:hover + #slide {
  display: table-cell;
}

Вот пример.

  • 0
    Чтобы выяснить, почему это работает: + - соседний селектор брата ; он выбирает «#slide» только в том случае, если это следующий брат после «#pucenas: hover», то есть стиль применяется только при наведении курсора на его брата. Одним из ограничений использования родного брата является то, что зеленый ползунок исчезнет, если вы переключитесь на него; использование дочернего селектора ( #all_extended > #slide ) было бы немного более плавным.
  • 0
    @davidpauljunior я действительно хотел, чтобы он был анимирован ... он должен легко открываться и закрываться, как описано на картинке, которую я предоставил ...
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню