Родительский элемент float влияет на ширину дочернего элемента div - PullRequest
Новая
       5

Родительский элемент float влияет на ширину дочернего элемента div

1 голос
/ 30 августа 2011

Я пытаюсь создать очень простую подсказку, которая скрывает / показывает при наведении курсора с помощью jQuery.

( jsFiddle демо задачи )

Чтобы сделать это, я поставил div на li, у которого будет всплывающая подсказка. Этот div абсолютно расположен поверх каждого li. Div всплывающей подсказки будет содержать текст различной длины, поэтому я не могу просто предварительно определить его ширину. Я просто хочу, чтобы ширина увеличивалась в зависимости от длины текста.

Моя проблема в том, что когда я плаваю в li, div также всплывает (или это так кажется), следовательно, беря ширину плавающего li. Теперь всплывающая подсказка становится такой же узкой, как ширина li, что мне не нравится.

Это HTML: 

<ul id="images">
    <li><img src="[some image]" /><div class="tooltip">Some text that is quite long.</div></li>
    <li><div class="tooltip">Some text that is quite small.</div><img src="[some image]" /></li>
    <li><img src="[some image]" /></li>
    <li><img src="[some image]" /></li>
</ul>

Это CSS: 

#images li {
    list-style: none;
    margin-left: 10px;
    position: relative;
}

.tooltip {
    color: #FFF;
    clear: both;
    background: #000;
    padding: 10px;
    font: 11px Arial, Helvetica, sans-serif; 
    -moz-border-radius: 5px;
    position: absolute;
    top: -50px;
    display: none;
    border: 2px solid #999;
}

Я надеюсь, что кто-нибудь поможет мне с этой проблемой.

Ответы [ 3 ]

1 голос
/ 30 августа 2011

Вы всегда можете рассчитать точную ширину раньше.

Например, вы создаете div всплывающей подсказки за пределами вашей страницы, например 

<div class="tooltip" id="calc"></div>

и 

#calc{
  top:-100px;
  left:-100px;
}

Если вы добавите следующие js, они будут хорошо отображаться 

$(".tooltip","#images").each(function(){
  $("#calc").text($(this).text());
  $(this).width($("#calc").width());
});

обновленная скрипка здесь

1 голос
/ 30 августа 2011

Блочные элементы расширяются до ширины своих контейнеров. Float не меняет этого.

Если вы хотите иметь другую ширину в верхней части инструмента, используйте width и укажите ширину в пикселях .

Если вы хотите пройти более сложный маршрут, вы можете определить ширину и высоту, проверить наличие переполнения и расширить его с помощью JavaScript.

0 голосов
/ 30 августа 2011

Я думаю, вам нужно немного изменить свой подход!Вместо того, чтобы использовать тот же div, что и фактическая всплывающая подсказка, вы можете использовать его HTML-содержимое внутри div, который имеет абсолютную позицию, и вы устанавливаете его позицию на основе позиции объекта, на который наведен курсор. 

$('#images li').hover(function() {
  $('#myTooltip').html($(this).find('.tooltip').html());
  /* Here you need to set #myTooltip absolute position. 
     based on the position of $('this') or the mouse position
     with an offset */

}, function() {
  $('#myTooltip').hide();
});

где#myTooltip - это div, определенный вне вашего списка и имеющий абсолютную позицию.

...