Как использовать CSS для позиционирования всплывающего окна div при использовании: hover ...?

Question

Я пытаюсь создать всплывающее окно в CSS.В данном случае это небольшой div, содержащий текст, помечающий изображение, которое вы наводите.Тем не менее, я определенно делаю это неправильно.Я либо неправильно позиционирую div: hover в CSS (я пробовал разные позиции (фиксированный, абсолютный, float, clear и т. Д.), Но он продолжает появляться внутри основного div. Я мог ошибиться с моим HTML, так как яЯ помещаю его в основной div, который вы наводите, чтобы всплывающее окно появлялось. Но я думаю, оно должно быть там, чтобы отображаться, когда вы наводите основной div. Любая помощь приветствуется. Код ниже:

HTML:

<div class="topIcons topIconsHover topLabelHover">
    <a href="image.html"><img src="icons/image.png" /></a> 
    <div class="topLabelHover">Image</div>  
</div>  

CSS:

.topIcons {
    padding:14px 6px 10px 6px;
    float:right;
 }

.topIconsHover:hover {
    background-color:#555555;
    cursor:pointer
}

.topLabelHover:hover {
    background-color:#555555;       
    width:80px;
    height:24px;
    position:fixed;
        top:40px;
}

Я в порядке с использованием JavaScript (или JQuery), если это необходимо, но это кажется чем-то достаточно простым для CSS.Лучше использовать CSS поверх JavaScript (или Jquery), когда это возможно, потому что, возможно, это быстрее? Я мог бы ошибиться, но был бы заинтересован в наилучшей практике.

edit * По-прежнему возникают проблемы, так что я думал, чтообъясните далее, что я пытаюсь сделать с моим макетом страницы, и, возможно, это поможет. У меня есть ряд значков на панели навигации, все всплывающие правильно. При наведении курсора я хотел бы изменить фон (который яудалось в CSS с помощью класса "topIconsHover") и чтобы div "label" появлялся под связанным значком hovered icon на панели навигации при наведении.

Answer 1

Думаю, вы хотите что-то вроде этого:

.topIcons {
    padding:14px 6px 10px 6px;
    float:right;
 }

.topIconsHover:hover {
    background-color:#555555;
    cursor:pointer
}

.topLabelHover {
    display:none;
}

.topIconsHover:hover .topLabelHover {
    display:block;
    position:absolute;
    background-color:#555555;       
    width:80px;
    height:24px;
    top:40px;
}

http://jsfiddle.net/kHPZK/

Answer 2

Вы можете использовать класс :hover в CSS только тогда, когда хотите изменить css элемента, к которому применяется правило: hover. В вашем коде вы нашли интересный обходной путь: использование .topLabelHover:hover для манипулирования CSS нескольких элементов, когда любой из них был наведен.Это будет работать, за исключением того, что вам нужно учитывать тот факт, что это изменит css всех элементов с этим классом, а не только один зависший.Вы можете сделать это, убедившись, что CSS всплывающего окна является единственным, который изменяется, установив CSS запускающего элемента на одно и то же:

.topIcons {
    position: absolute;
    padding:14px 6px 10px 6px;
    float:right;
 }

.topIconsHover:hover {
    background-color:#555555;
    cursor:pointer
}

.topLabelHover {
    display: none;
}

.topLabelHover:hover, .topIconsHover {
    display: block;
    background-color:#555555;       
    width:80px;
    height:24px;
    position:absolute; //makes the div appear 40px from the top of parent
    top:40px;
}

Однако, ИМХО, это очень запутанно читать,Ваш код был бы намного понятнее, короче и проще, если бы вы просто использовали jQuery:

HTML:

<div class="topIcons topIconsHover">
    <a href="image.html"><img src="icons/image.png" /></a> 
    <div class="topLabelHover">Image</div>  
</div>  

Javascript:

$(".topIconsHover").hover( function() {
    $(".topLabelHover").addClass("hovered");
});

Css:

.topIcons {
    position: absolute;
    padding:14px 6px 10px 6px;
    float:right;
 }

.topIconsHover:hover {
    background-color:#555555;
    cursor:pointer
}

.topLabelHover {
    display: none;
}

.hovered {
    display: block;
    background-color:#555555;    //this,   
    width:80px;                  //this,
    height:24px;                 //and this should be factored out into a separate class!
    position: static;            //revert to normal positioning.
}

Производительность версии CSS была бы бесконечно лучше, но поскольку версия Jquery по-прежнему занимает гораздо меньше 100 мс, чтобы показать всплывающее окно, она будет ощущаться столь же мгновенно.: D

РЕДАКТИРОВАТЬ: Если вы хотите, чтобы всплывающее окно появлялось под элементом div, просто поместите <div> всплывающего окна сразу после запуска div вместо него и измените значение .hovered css to this:

.hovered {
    background-color:#555555;       
    width:80px;
    height:24px;
}

Если вы хотите создать эффект, похожий на всплывающую подсказку, просто введите «jquery tooltip» в Google и выберите любое расширение, наиболее соответствующее вашим требованиям.: D

Answer 3

Смотрите здесь:

DEMO

Используемый код:

HTML:

<div class="imagebox">
  <a href="image.html"><img src="http://dummyimage.com/300x120/444/cf5" /></a> 
  <div class="label">transparent Image label</div>  
</div> 

CSS:

  .imagebox{
    position:relative;
    margin:0 auto;
    width:300px;
    background:#eee;
  }
  .label{
    position:absolute;
    display:none;
    top:0px;
    padding:18px;
    background:#fff;
  }

JQuery:

$('.imagebox').bind('mouseenter mouseleave', function(e){
  var label = $(this).children('.label');
  m = (e.type === 'mouseenter') ?
  label.stop(1).fadeTo(300,0.9) :
  label.stop(1).fadeTo(300,0) ;
});