Отображение и скрытие DIV элемента и изменение непрозрачности в CSS

Question

У меня есть этот код:

<div class="contact-item" 
    onmouseover="div_ContactItem_mouseover(this)"> 
</div> 

<div id="div_ItemOver" 
style="display: none;" 
class="contact-item-hover" 
onmouseout="div_ItemOver_mouseout(this)"> 

<div style="color: red; opacity: 1; width: 20px; height: 20px;">link1</div> 
<div style="color: red; opacity: 1; width: 20px; height: 20px;">link1</div> 
<div style="color: red; opacity: 1; width: 20px; height: 20px;">link1</div> 
</div> 

и эти JavaScript заявления:

function div_ContactItem_mouseover(e) { 
$("#div_ItemOver").show().offset($(e).offset()); 
}; 

function div_ItemOver_mouseout(e) {   
$("#div_ItemOver").hide(); 
}; 

и эти правила CSS:

.contact-item, .contact-item-hover { 

cursor: pointer; 
display: inline-block; 
border-radius: 5px; 
margin: 0px 3px 3px 0px; 
width: 340px; 
height: 90px; 
border: 1px solid #244f56; 
background-color: #f8f8f8; 
} 

.contact-item-hover { 

background-color: #000000; 
position: absolute; 
opacity:0.12; 
filter:alpha(opacity=12); 
} 

Что я хочу:

Мне нужно, чтобы показать второй div с идентификатором div_ItemOver всякий раз, когда мышь находится на первом div который имеет contact-item класс CSS, на первый DIV, в дополнение div_ItemOver имеет cssopacity равна 0.12.

Что проблема:

1. У меня есть links на div_ItemOver всякий раз, когда я иду по этим ссылкам, mouseout и mouseover происходит, и это вызывает что-то вроде мигающего на элемент, то почему? и как я могу удалить это мигание?

2. Я не хочу opacity 0.12 отражать на links, которые находятся внутри второй DIV, для этого у меня есть встроенный стиль на эти ссылки, которые устанавливают его непрозрачность 1, но она не работает. Как я могу показать эти ссылки без прозрачности и полностью ясно?

Это мой jsFiddle: http://jsfiddle.net/am1r_5h/1zrytzjw/2/

Чтобы увидеть проблему, нужно поставить курсор на прямоугольник, а затем перейти к ссылкам в верхнем левом углу

Answer 1

, если назначить те же обработчики для обоих дивы ваш мерцающий ушел:

http://jsfiddle.net/1zrytzjw/4/

<div id="div_ItemOver" style="display: none;" class="contact-item-hover" onmouseover="div_ContactItem_mouseover(this)" onmouseout="div_ItemOver_mouseout(this)"> 
... 
</div> 

<div class="contact-item" onmouseover="div_ContactItem_mouseover(this)" onmouseout="div_ItemOver_mouseout(this)"></div> 

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

Answer 2

1) Я не буду вдаваться в подробные сведения, но это должно делать, как eventbubbling возникает, когда дочерний элемент запускается, он также автоматически создает эффекты для родителя. Вы можете решить мерцание, добавив e.stopPropagation(); в начало вашего div_ItemOver_mouseout(). Так это будет выглядеть следующим образом:

function div_ItemOver_mouseout(e) {   
    e.stopPropagation(); 
    $("#div_ItemOver").hide(); 
}; 

2) Для вашего второго вопроса, это возможность для Вас, чтобы сделать прочь с установкой непрозрачности/фильтра, а скорее попробовать формат background-color: rgba(R, G, B, A);? Таким образом, если вы измените следующие изменения в CSS, то ваши элементы будут выглядеть, как вы хотели им:

.contact-item-hover { 
    background-color:rgba(240, 240, 240, 0.25); 
    position: absolute; 
} 

.contact-item-hover > div{ 
    background-color:rgba(240, 240, 240, 0.85); 
    width:50px; 
    height:20px; 
    color:red; 
} 

.contact-item-hover > div фактически ссылается на свои ссылки, так что вам не придется добавлять встроенные стили для каждая ссылка у вас есть.

Answer 3

Вы можете просто исправить это, поместив скрытый div внутри первого div. Поэтому просто переместите закрывающий тег div первого div на дно.

Я думаю, что причина, по которой она мигает, заключается в том, что когда она попадает в те "ссылки" divs, состояние mouseover нарушается, скрывая div с вашими ссылками, но поскольку ваша мышь все еще там, первый div и, следовательно, показывает ссылки снова. Помещение скрытого div внутри делает так, чтобы ссылки были частью div, у которого связано с ним указатель мыши, поэтому наведение мыши теперь включает ссылки. Я надеюсь, что в этом есть смысл.

Answer 4

1) Я заменил ваши функции Javascript mouseover/mouseout с помощью jQuery .hover(), который принимает аргументы mouseon и mouseout http://api.jquery.com/hover/. Мерцание больше не присутствует.

2) Я не уверен точно, когда вы хотите, какой уровень непрозрачности, но вы можете изменить его в событиях .css() для мыши и мыши, а также в стиле CSS для начальной непрозрачности.

$("#div_ItemOver").css({"opacity":"1"}) 

я ссылка #div_ItemOver в случае зависания, так что изменение непрозрачности остается при наведении на этой части, а также.

$(".contact-item, #div_ItemOver").hover() 

Некоторые дополнительные изменения:

• Я положил свой стиль в CSS, как вы используете один и тот же стиль в нескольких местах
• я использовал установки и Float, чтобы ваши ссылки появляются над контактно пункт DIV

Вот jsfiddle http://jsfiddle.net/1zrytzjw/8/

Answer 5

1. Эта проблема может быть решена путем добавления как обработчиков mouseover, так и mouseout как к div.
2. Второй можно решить, поставив background: rgba(0, 0, 0, 0.12); вместо background-color: #000000; и opacity:0.12;

http://jsfiddle.net/1zrytzjw/10/