mouseover show div

Я не смог найти ответ на это в любом месте.mouseover show div

Как вы создаете скрытый div, появляющийся при уходе за тем, где он был бы? Пожалуйста, не говорите мне, как сделать ссылку, я знаю, как сделать ссылку;)

Я пробовал: а) OnMouseOver установить видимость видимые и onmouseout установить видимость скрытой это работает в 0 браузерах.

б.) установление границ для 0px и фон прозрачным и innerhtml к «» onmouseout и возвращаясь OnMouseOver это работает в хроме

гр.) Это был самый популярный ответ в Интернете, который я знал Wouldn» t, но я все равно попытался: сделать контейнер div div видимым, а затем увидеть видимость и visibilit у скрыто для внутренней DIV

д) Настройка непрозрачности 1/100 и 0 работ в хроме

е) последнее средство:.. я попытался сделать прозрачный GIF и иметь его отображение onmouseout это также не удалось

Я не пробовал использовать jquery .hover, но я прочитал, что он может работать некорректно.

У меня нет других идей. Кто-нибудь поможет, пожалуйста?

источник

2012-01-05 Ryan Stortz

Что случилось с методом непрозрачности? – sdleihssirhc

отлично работает в Chrome и webkit, и я предполагаю, что firefox, но он не работает в IE, конечно! –

Но все, что вам нужно, это установить фильтр в 'alpha (opacity = XX)', чтобы получить поддержку IE6-8. – sdleihssirhc

Если я правильно вы хотите DIV элемент, чтобы показать, если вы над ним и скрывать, когда мышь не закончена. Если это все вы можете сделать это только с HTML и CSS:

<head> 
<style> 
     #outerDiv{width:100px;height:100px;background-color:blue;} 
     #innerDiv{width:100px;height:100px;background-color:red;display:none;} 
     #outerDiv:hover #innerDiv {display:block;} 
    </style> 
</head> 
<html> 
    <div id="outerDiv"> 
     <div id="innerDiv">some text</div> 
    </div> 
</html>

Внешняя ДИВ всегда видна и когда он парил внутренний один показан.

источник

2012-01-05 21:14:52 Draganov

Как будет отображаться внешняя информация, если ее содержимое пустое? Это не будет видно. –

Внешний div имеет фиксированные размеры - так что это видно. Попробуйте здесь: http://jsfiddle.net/wVpBu/ – Draganov

Я думаю, что дисплей: ни один не получил его на работу, потому что он работает в jsfiddle для меня в IE, спасибо большое Драганову! –

Попробуйте настроить атрибут отображения div на «block» вместе с атрибутом видимости на «visible» в вашем событии onmouseover.

Установите дисплей на «нет» и видимость «скрыта», чтобы скрыть.

Конечно, проблема будет стрелять мышью на скрытом div.

Это работает во всех браузерах, я когда-либо использовал его.

источник

2012-01-05 20:38:41

точно. как только он скрыт, я в тупике о том, что делать. –

@ Ryan gotcha. Трюк будет заключаться в том, чтобы выбрать div или объект, который уже будет отображаться. Предположительно, у вас есть что-то, отображающее, где должен отображаться другой, - затем используйте событие onmouseover для этого, чтобы установить атрибуты Я упомянул. –

@ Ryan вы можете добавить пустой div с некоторой высотой и шириной. onmouseover этого div-набора вашего исходного div для «block» – rahool

Я думаю, что это вам поможет: http://jsfiddle.net/eb4x9/ Событие mouseover не запускается, когда div скрыт, чтобы вы могли определить его положение и размер. Вот источник:

HTML

<div id="foo"></div>

CSS

#foo { 
    width: 300px; 
    height: 300px; 
    background-color: red; 
    visibility: hidden;  
}

$(document).mousemove(function (event) { 
    var div = $('#foo'), 
     divLeft = div.offset().left, 
     divTop = div.offset().top, 
     divWidth = div.width(), 
     divHeight = div.height(); 
    if ((event.pageX >= divLeft && event.pageX <= divLeft + divWidth) && 
     (event.pageY >= divTop && event.pageY <= divTop + divHeight)) { 
     div.css('visibility', 'visible'); 
    } else { 
     div.css('visibility', 'hidden');   
    } 
}); 
$(document).mouseleave(function (event) { 
    var div = $('#foo'); 
    div.css('visibility', 'hidden');   
});

С уважением!

источник

2012-01-05 21:28:57

да, я понял, что это может выглядеть так, но я надеялся на более простой способ, учитывая, что div является круговым. Я должен был бы создать массив точек с эллиптической функцией, но, о, хорошо, это достаточно близко! Спасибо за ответ! –

Добро пожаловать :-) –

Попробуйте это, имея две дивы один пустой и другой с содержанием и переключаясь между ними при наведении курсора мыши

<html> 
<head> 

<script> 
function toggle() { 
    var your_div = document.getElementById("your_div"); 
    var empty_div = document.getElementById("empty_div"); 

    if(your_div.style.display == "block") { 
      your_div.style.display = "none"; 
      empty_div.style.display = "block"; 
    } 
    else { 
      your_div.style.display = "block"; 
      empty_div.style.display = "none"; 
    } 
} 
</script> 

<style> 
    #empty_div{width:100px; height:100px;} 
    #your_div{width:100px; height:100px; border: 1px solid #000fff;} 
</style> 
</head> 

<body> 
    <div id="your_div" onmouseover="toggle()">xyz</div> 
    <div id="empty_div" onmouseover="toggle()"></div> 
</body> 
</html>

источник

2012-01-05 21:32:48 rahool

есть интересная мысль. Не совсем то, что я имел в виду, но это определенно крутой подход. –

mouseover show div

ответ

Смежные вопросы