CSS позиционирование div при наведении мыши

Question

CSS позиционирование div при наведении мыши

0

Я пытаюсь позиционировать div динамически, когда я нахожусь над div "A", другой div "B" будет виден, и он должен быть расположен ниже div A. В основном я пытаюсь достичь типа инструментальных подсказок. пытаясь позиционировать с помощью jQuery, как я могу это сделать

css для div B

.B ul li
{
font-size: 11px;
font-family: Arial;
float: left;
}

.B{

min-height:10px;  
background: #333333;
color:white;
padding:5px;
position:absolute;
word-wrap:break-word;
-moz-border-radius:5px; 
-webkit-border-radius:5px;
z-index:999;
display: none;


}

.B:after{ /*arrow added to uparrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:-16px; 
left:30px;
width:0;
height:0;
border-color: transparent transparent #333333 transparent; 
border-style: solid;
 border-width: 10px;

 } 

css for 'div A'

.A
{
float:left;
    cursor:pointer;
font-family:Arial;
    font-size: 11px;
color: rgb(119, 119, 119);
}

JQuery:

$('.A' ).live('mouseover',function (event){
event.preventDefault();
var B=$(this).next();
$(B).show();
$(B).css( { "margin-top" : "27px", "margin-left" : "200px" } );

});

user1851420 08 янв. 2014, в 07:27

Источник

Теги:

jquery

html

css

tooltip

2 ответа

1

Любой вред, если мы это сделаем, используя PURE CSS? Поскольку вы отметили это с помощью CSS, так что я предполагаю, что решения CSS принимаются.

демонстрация

Демо 2 (ничего необычного, просто выделили всплывающую подсказку)

Демо 3 Использование transition с opacity

Здесь основная часть использует свойство content, которое :hover a, показывая содержание атрибута data-tooltip который является допустимым пользовательским атрибутом, как HTML5

<p>This is a <span data-tooltip="showthis">tooltip</span></p>

span:after {
    display: none;
    content: attr(data-tooltip);
    position: absolute;
    bottom: -50px;
    background: #f00;
    padding: 10px;
}

span {
    position: relative;
}

span:hover:after {
    display: block;
}

Mr. Alien 08 янв. 2014, в 03:33

0

Здесь, вместо того, чтобы показать это, я хочу использовать данные, которые извлекаются из базы данных с использованием php. Могу ли я показать div или содержимое внутри div в качестве всплывающей подсказки?
user1851420 08 янв. 2014, в 06:34
0

@ user1851420, чем вы можете echo текст в атрибуте data-tooltip :) и я только что просмотрел ваш профиль, вы не принимаете ответы, поэтому нажмите на галочку рядом с ответами, чтобы принять их, если они вам помогут
Mr. Alien 08 янв. 2014, в 06:36
0

@ user1851420 также, если вы хотите поиграть с элементами, тогда вы идете jsfiddle.net/njgmC
Mr. Alien 08 янв. 2014, в 06:42

Показать ещё 1 комментарий

Ещё вопросы

Здесь, вместо того, чтобы показать это, я хочу использовать данные, которые извлекаются из базы данных с использованием php. Могу ли я показать div или содержимое внутри div в качестве всплывающей подсказки?
@ user1851420, чем вы можете echo текст в атрибуте data-tooltip :) и я только что просмотрел ваш профиль, вы не принимаете ответы, поэтому нажмите на галочку рядом с ответами, чтобы принять их, если они вам помогут
@ user1851420 также, если вы хотите поиграть с элементами, тогда вы идете jsfiddle.net/njgmC

Bhojendra Nepal · Accepted Answer · 2014-01-08T05-08-00.000Z

Существует небольшая ошибка, когда селектор объектов не использует $ (B), но использует B:

$('.A' ).live('mouseover',function (event){
event.preventDefault();
var B=$(this).next();
B.show();
B.css( { "margin-top" : "27px", "margin-left" : "200px" } );

});

Вы уже назначили B = $ (this).next(); который сам по себе является объектом. Просто используйте B вместо $ (B).

Я также рекомендую вам использовать на вместо живой функции.

хорошо .. это работа? B.css ({top: 70, left: $ (this) .position (). Left-25}); когда я использую это все div B появляется в той же позиции