За последние 24 часа нас посетили 17606 программистов и 1626 роботов. Сейчас ищут 1733 программиста ...

появление div onhover другого объекта

Тема в разделе "HTML и CSS", создана пользователем Dmtq, 30 янв 2015.

  1. Dmtq

    Dmtq Активный пользователь

    С нами с:
    2 мар 2014
    Сообщения:
    28
    Симпатии:
    0
    Есть:
    Код (Text):
    1.  
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4.     <meta charset="UTF-8">
    5. <style>
    6. .toggle-box {
    7.   display: none;
    8. }
    9. .toggle-box + label {
    10.   cursor: pointer;
    11.   display: block;
    12.   font-weight: normal;
    13.   line-height: 21px;
    14.   margin-bottom: 5px;
    15.   border: solid 1px #8FA7BB;
    16. }
    17. .toggle-box + label + div {
    18.   display: none;
    19.   margin-bottom: 10px;
    20. }
    21. .toggle-box:checked + label  + div {
    22.   display: block;
    23. }
    24. .toggle-box + label:before {
    25.   background-color: #8FA7BB;
    26.   color: #FFFFFF;
    27.   content: "▼";
    28.   display: block;
    29.   float: left;
    30.   font-size: 12px;
    31.   font-weight: bold;
    32.   height: 16px;
    33.   line-height: 16px;
    34.   margin: 2px 5px 0px;
    35.   text-align: center;
    36.   width: 16px;
    37. }
    38. .toggle-box:checked + label:before {
    39.   content: "▲";
    40. }
    41. </style>
    42. </head>
    43. <body>
    44. <input class="toggle-box" id="id-1" type="checkbox">
    45. <label for="id-1">Группа 1</label>
    46. <div>Текст</div>
    47.  
    48. <input class="toggle-box" id="id-2" type="checkbox">
    49. <label for="id-2">Группа 2</label>
    50. <div>Текст</div>
    51. </body>
    52. </html>
    Хочу добавить после заголовка "группа" менюшку а-ля редактировать. и чтоб появлялась onhover.
    Для этого добавляю div class="editmenu" и в css .editmenu {display:none;} и .toggle-box:hover + .editmenu {display:inline;}
    Получается:
    Код (Text):
    1.  
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4.     <meta charset="UTF-8">
    5. <style>
    6. .toggle-box {
    7.   display: none;
    8. }
    9. .toggle-box + label {
    10.   cursor: pointer;
    11.   display: block;
    12.   font-weight: normal;
    13.   line-height: 21px;
    14.   margin-bottom: 5px;
    15.   border: solid 1px #8FA7BB;
    16. }
    17. .toggle-box + label + div {
    18.   display: none;
    19.   margin-bottom: 10px;
    20. }
    21. .toggle-box:checked + label  + div {
    22.   display: block;
    23. }
    24. .toggle-box + label:before {
    25.   background-color: #8FA7BB;
    26.   color: #FFFFFF;
    27.   content: "▼";
    28.   display: block;
    29.   float: left;
    30.   font-size: 12px;
    31.   font-weight: bold;
    32.   height: 16px;
    33.   line-height: 16px;
    34.   margin: 2px 5px 0px;
    35.   text-align: center;
    36.   width: 16px;
    37. }
    38. .toggle-box:checked + label:before {
    39.   content: "▲";
    40. }
    41. .editmenu {
    42.     display:none;
    43. }
    44. .toggle-box:hover + .editmenu {
    45.     display:inline;
    46. }
    47. </style>
    48. </head>
    49. <body>
    50. <input class="toggle-box" id="id-1" type="checkbox">
    51. <label for="id-1">Группа 1<div class="editmenu">edit</div></label>
    52. <div>Текст</div>
    53.  
    54. <input class="toggle-box" id="id-2" type="checkbox">
    55. <label for="id-2">Группа 2<div class="editmenu">edit</div></label>
    56. <div>Текст</div>
    57. </body>
    58. </html>
    подскажите почему <div class="editmenu">edit</div> не появляется?
     
    #1 Dmtq, 30 янв 2015
  2. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    А в какой документации ты такую возможность вычитал?
     
    #2 denis01, 30 янв 2015
  3. Dmtq

    Dmtq Активный пользователь

    С нами с:
    2 мар 2014
    Сообщения:
    28
    Симпатии:
    0
    не помню.
    Код (Text):
    1.  
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4.     <meta charset="UTF-8">
    5. <style>
    6. .editmarker {
    7.     display: none;
    8. }
    9. .edit:hover + .editmarker {
    10.     display: inline;
    11. }
    12. </style>
    13. </head>
    14. <body>
    15. <span class="edit"><label>Mytext</label></span><img class="editmarker" src="img/edit16.png" />
    16. <br>
    17. <span class="edit"><label>Mytext</label></span><img class="editmarker" src="img/edit16.png" />
    18. </body>
    19. </html>
    но ведь вне раскрывающихся конструкций (см выше) работает?! и с class и с id
     
    #3 Dmtq, 30 янв 2015
  4. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    Ну так посмотри в документацию, чтобы перепроверить, всё ли правильно делаешь. Или мне за тебя это смотреть?
     
    #4 denis01, 30 янв 2015
  5. Dmtq

    Dmtq Активный пользователь

    С нами с:
    2 мар 2014
    Сообщения:
    28
    Симпатии:
    0
    Ну так, уважаемый капитан очевидность, я и посмотрел и не нашел и после двух дней мытарств пришел сюда к вам за помощью. И вижу две конструкции, работающие независимо друг от друга, но не работающие при смешении.
    Гугл пользовал, форумный поиск пользовал, правил форума не нарушил.
    Вы уж извините, но я вполне четко сформулировал вопрос, но вы упорно продолжаете меня отправлять в неизвестном направлении вместо совета.
    Или для вас ткнуть пальцем в нужную страницу мануала, новичку в памперсе, не комильфо? Или уж на крайний случай, как умудренному опытом швырнуть в меня этим мануалом и гордо удалиться?
    (наверняка, по вашему мнению, я сейчас веду себя, как новобранское хамло, но толку от ваших замечаний нет)
     
    #5 Dmtq, 30 янв 2015
  6. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    После открытия toggle-box остался display: none;
    Это я в chrome посмотрел
     
    #6 denis01, 30 янв 2015
  7. Dmtq

    Dmtq Активный пользователь

    С нами с:
    2 мар 2014
    Сообщения:
    28
    Симпатии:
    0
    правильно.
    display должен вроде как поменяться при hover.

    я вообще сначала hover вешал на label, но не работало. я решил, что toggle-box "выше" и просто закрывает собой label и перебрался на него.
    но снова не работает

    даже если добавить
    Код (Text):
    1.  
    2. .toggle-box:checked + label + .editmenu {
    3.   display: inline;
    4. }
    чтоб срабатывало на checked, то не работает.

    может беда в том что editmenu расположен в label, а не рядом

    но тогда моих познаний на другой вариант появления кнопки не хватает.
     
    #7 Dmtq, 30 янв 2015
  8. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    #8 denis01, 30 янв 2015
  9. Dmtq

    Dmtq Активный пользователь

    С нами с:
    2 мар 2014
    Сообщения:
    28
    Симпатии:
    0
    да.
    вот код из примера, приближенный к моим потребностям:
    Код (Text):
    1.  
    2. <html>
    3.   <style type="text/css">
    4.     .layer { display: inline; }
    5.     .editico { display: none; }
    6.     .section:hover .editico { display: inline; }
    7.   </style>
    8. </head>
    9. <body>
    10.   <div class="section">
    11.     <div class="layer">group 1</div>
    12.     <img class="editico" src="myImage.jpg" />
    13.   </div>
    14.    
    15.     <div class="section">
    16.     <div class="layer">group 2</div>
    17.     <img class="editico" src="myImage.jpg" />
    18.   </div>
    19. </body>
    работает. т.е. при hover section появляется editico

    теперь пытаюсь вживить в свой код.
    добавляю:
    Код (Text):
    1.  
    2. .layer { display: inline; }
    3. .editico { display: none; }
    4. .toggle-box:hover .editico { display: inline; }
    section заменен на toggle-box, как главный во всей связке и управляющий всеми остальными элементами.
    и:
    Код (Text):
    1.  
    2. <input class="toggle-box" id="id-1" type="checkbox">
    3. <label class="layer" for="id-1">Группа 1</label><img class="editico" src="myImage.jpg" />
    4. <div>Текст</div>
    просто img после label (не внутри, а рядом)

    в итоге:
    Код (Text):
    1.  
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4.     <meta charset="UTF-8">
    5. <style>
    6. .toggle-box {
    7.   display: none;
    8. }
    9. .layer { display: inline; }
    10. .editico { display: none; }
    11. .toggle-box:hover .editico { display: inline; }
    12. .toggle-box + label {
    13.   cursor: pointer;
    14.   display: block;
    15.   font-weight: normal;
    16.   line-height: 21px;
    17.   margin-bottom: 5px;
    18.   border: solid 1px #8FA7BB;
    19. }
    20. .toggle-box + label + div {
    21.   display: none;
    22.   margin-bottom: 10px;
    23. }
    24. .toggle-box:checked + label  + div {
    25.   display: block;
    26. }
    27. .toggle-box + label:before {
    28.   background-color: #8FA7BB;
    29.   color: #FFFFFF;
    30.   content: "▼";
    31.   display: block;
    32.   float: left;
    33.   font-size: 12px;
    34.   font-weight: bold;
    35.   height: 16px;
    36.   line-height: 16px;
    37.   margin: 2px 5px 0px;
    38.   text-align: center;
    39.   width: 16px;
    40. }
    41. .toggle-box:checked + label:before {
    42.   content: "▲";
    43. }
    44. </style>
    45. </head>
    46. <body>
    47. <input class="toggle-box" id="id-1" type="checkbox">
    48. <label class="layer" for="id-1">Группа 1</label><img class="editico" src="myImage.jpg" />
    49. <div>Текст</div>
    50. </body>
    51. </html>
    запускаем и видим, что конструкция input-label-div при добавлении img перестает работать.
    печаль.
    правлю:
    Код (Text):
    1.  
    2. .toggle-box + label + img + div {
    3.   display: none;
    4.   margin-bottom: 10px;
    5. }
    6. .toggle-box:checked + label + img + div {
    7.   display: block;
    8. }
    добавляю + img для соблюдения цепочки. div начинает скрываться и появляться при chcked, но hover ка не работал так и не рабоает.
    есть мысли?

    если убрать:
    Код (Text):
    1.  
    2. .toggle-box:hover .editico { display: inline; }
    если сделать:
    Код (Text):
    1.  
    2. .toggle-box + label + img + div {
    3.   display: none;
    4.   margin-bottom: 10px;
    5. }
    6. .toggle-box:checked + label + img {
    7.   display: inline;
    8. }
    9. .toggle-box:checked + label + img + div {
    10.   display: block;
    11. }
    то checked появляет картинку, но хочется hover
     
    #9 Dmtq, 30 янв 2015
(Вы должны войти или зарегистрироваться, чтобы разместить сообщение.)