За последние 24 часа нас посетили 5695 программистов и 460 роботов. Сейчас ищут 214 программистов ...

Сволочной тэг <a>

Тема в разделе "HTML и CSS", создана пользователем Vladchucha, 24 дек 2019.

  1. Vladchucha

    Vladchucha Новичок

    С нами с:
    12 ноя 2018
    Сообщения:
    102
    Симпатии:
    5
    Всем привет.
    Хочу простое всплывающее окно при наведении мыши на
    текст "Возможные возражения"
    Вот HTML.
    HTML:
    1. <a href="#">
    2.     <span class="hover-box"> Да, современная наука многого достигла,<br /> однако имелось много
    3.         ...............<br />
    4.       </span>
    5.              Возможные возражения.
    6.    </a>
    Вот CSS
    Код (CSS):
    1. span.hover-box {
    2.     border: 1px solid #fc6;
    3.     color: #000;
    4.     display: none;
    5.     text-decoration: none;
    6.      
    7. }
    8. span.hover-box:hover:before{
    9. text-decoration: none;  
    10. }
    Проблема в том, что несмотря на
    text-decoration: none;,
    показывает все равно с подчеркиванием.
    Где ошибка ?
    Спасибо за помощь.
     
  2. Roman __construct

    [ БАН ]

    С нами с:
    27 апр 2019
    Сообщения:
    1.273
    Симпатии:
    113
    а что говорит господин Инспектор? :D
    --- Добавлено ---
    ...впрочем, неважно))

    берешь любой CSS-фреймворк и делаешь себе эту штуковину (оно называется Tooltip )
     
  3. Vladchucha

    Vladchucha Новичок

    С нами с:
    12 ноя 2018
    Сообщения:
    102
    Симпатии:
    5
    Ну вот опять двацать пять.
    Не хочу, хочу сам, но ошибки пока не вижу, наверно опять мало виски выпил.
    Поэтому и спрашиваю про конкретный HTML и CSS.
     
  4. MouseZver

    MouseZver Суперстар

    С нами с:
    1 апр 2013
    Сообщения:
    6.494
    Симпатии:
    1.033
    Адрес:
    Лень
    декор span присваиваешь
     
  5. Vladchucha

    Vladchucha Новичок

    С нами с:
    12 ноя 2018
    Сообщения:
    102
    Симпатии:
    5
    Хммм,sorry,
    что такое декор?
     
  6. MouseZver

    MouseZver Суперстар

    С нами с:
    1 апр 2013
    Сообщения:
    6.494
    Симпатии:
    1.033
    Адрес:
    Лень
    text-decoration
     
    Vladchucha нравится это.
  7. Vladchucha

    Vladchucha Новичок

    С нами с:
    12 ноя 2018
    Сообщения:
    102
    Симпатии:
    5
    "декор span присваиваешь"
    Ну да, именно это и делаю,
    в классе для span присваиваю:
    text-decoration:none;
    Но плевать хотела,
    показывает с подчеркиванием....
     
  8. Vladchucha

    Vladchucha Новичок

    С нами с:
    12 ноя 2018
    Сообщения:
    102
    Симпатии:
    5
    Всем спасибо,
    вопрос решен.
     
  9. Roman __construct

    [ БАН ]

    С нами с:
    27 апр 2019
    Сообщения:
    1.273
    Симпатии:
    113
    А чего решение не постишь?

    Потомкам ))

    Все блин эгоисты стали таккие))
     
  10. Vladchucha

    Vladchucha Новичок

    С нами с:
    12 ноя 2018
    Сообщения:
    102
    Симпатии:
    5
    Хм...
    Я думал я один тут в трех соснах не могу разобраться,
    пишут в этой теме профи только...
    Завтра напишу, некогда сейчас....
     
  11. Sail

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

    С нами с:
    1 ноя 2016
    Сообщения:
    1.238
    Симпатии:
    274
    Зато читают - не только профи.
    Заглянет некто в поисках решения схожей проблемы - и что он увидит? :cool:
     
    Roman __construct нравится это.
  12. Roman __construct

    [ БАН ]

    С нами с:
    27 апр 2019
    Сообщения:
    1.273
    Симпатии:
    113
    Дада, тут каждый форумчанин спит и видит - как бы ему разобраться в твоих трех соснах

    //даже если нашел решение самостоятельно - желательно описать его в том же топике - это создает общую базу знаний
     
  13. Vladchucha

    Vladchucha Новичок

    С нами с:
    12 ноя 2018
    Сообщения:
    102
    Симпатии:
    5
    Sorry, виноват.
    Итак, есть умный текст, кое-где имеются слова "Возможные возражения".
    Надо, чтобы они были подчеркнуты (ага, думает юзер, ссылка) и при наведении мыши
    на них всплывает окно с нормальным (неподчеркнутым) подробным возражением.
    Причем без PHP и JS.
    Внизу решение, но должен указать,
    что так неправильно.
    Правильно - надо взять любой Framework и реализовать такую штуку,
    она называется Tooltip.
    HTML
    HTML:
    1.  
    2. <span class="toolbox"> Возможные возражения.
    3.          <span class="hover-box">
    4.              1. Да, современная наука многого достигла,<br />
    5.         однако имелось ...... </span>
    6.    </span>
    7.  
    Важный нюанс - <span> внутри другого <span> .
    CSS.
    Код (CSS):
    1. span.toolbox{
    2.       text-decoration:underline;
    3.       cursor:pointer;
    4.  
    5. }
    6. span.hover-box {
    7.     border: 1px solid #fc6;
    8.     color: white;
    9.     background:black;
    10.     padding:10px;
    11.     border-radius:20px;
    12.     display: none;
    13.     width:350px;
    14. }
    15. span.toolbox:hover > span.hover-box {
    16.     display: block;
    17.     position:relative;
    18.     top:10px;
    19. }
     
    Roman __construct нравится это.
  14. Roman __construct

    [ БАН ]

    С нами с:
    27 апр 2019
    Сообщения:
    1.273
    Симпатии:
    113
    Вполне нормальное у тебя решение. Респект.
     
    Vladchucha нравится это.