Я создал этот простой "всплывающий" инструмент, который, когда вы наводите указатель на определенный текст, отображает определение этого текста. Вот как это делается: http://jsfiddle.net/D4PzD/, когда вы наводите "ссылку на определение", вы увидите, что он показывает коробку с некоторым текстом.
поэтому основная его структура:
<span class="title">Title of definition</span>
<span class="def_box">Content that appears on hover here</span>
Проблема, с которой я столкнулась, заключается в том, что если я добавлю любую HTML-разметку в def_box, такую как тег списка <ul>
или <p>
def_box разбивается. Вот пример: http://jsfiddle.net/FDEKY/
Css:
span.title {
position: relative;
display: inline-block;
border-bottom: 1px dotted #2693e0;
cursor: help;
color: #000;
}
span.def_box {
display: none;
width: 400px;
position: absolute;
height: auto;
left: 25px;
font-size: 17px;
z-index: 400;
line-height: 22px;
border: 2px solid #2693e0;
outline: 5px solid #fff;
overflow: hidden;
padding: 13px 20px;
background: #fff;
}
span.title:hover + span.def_box {
display: block;
}
Я нашел способ обойти это и "исправил" его. Вот как я это сделал, если кому-то интересно: http://codepen.io/roxi_t/pen/Fbldu
<ul>
внутри <div>
вместо <span>
?
<ul>
не разрешены внутри <span>
s