onmouseover два div один видимый один скрытый при наведении Я хочу сделать второй div видимым, а первый скрытым как переключатель

пытаясь при наведении мыши показать первый div, но скрыть второй, затем при наведении показать второй div, но скрыть первый. извините, я нуб, плохо разбираюсь в javascript. кто-нибудь может решить это для меня, пожалуйста, я был бы очень признателен. Кажется, я пропустил часть этого кода, так как не знаю, как его применять, например onmouseover и onmouseout, если бы вы могли объяснить свои ответы, это тоже было бы здорово.

<!DOCTYPE html> 
<html>
<body>
<div id="placeholder" onMouseOver="document.getElementById('blink').style.display = 'block';" onmouseout="document.getElementById('blink').style.display = 'none';">
 <div id="show">
## Heading ##
 </div>
 <div id="blink">
 <p> some text </p>
 </div>
 </div>
</html>
</body>

 css
  #placement{display:block;}
 #show{display:block;}
 .blink{
  position:relative;
 left:100px;
 width:450px;
height:515px;
background:#000;
padding:15px;
color:white;

}
 #blink:hover #blink{
display:block;
visibility:visible;
}

  .hide_show{
position:absolute;
left:15px;
right:15px;
padding:0;
margin:0;
text-align:left;}

javascript html onmouseover
person Maevea Maverick    schedule 05.10.2013    source источник
comment
...затем при наведении... - Вы имеете в виду при отсутствии мыши?   -  person nnnnnn    schedule 05.10.2013

Ответы (2)


arrow_upward
0
arrow_downward

Хорошо, догадались, что вы хотите, чтобы строки заголовка отображались по умолчанию, а при наведении курсора отображался скрытый текст? Попробуйте выполнить следующие действия: (в основном вам нужно сначала сделать невидимым div #blink. Также неверное имя идентификатора для заполнителя (не размещения)

<!DOCTYPE html> 
<html>

<style>
#placeholder{display:block;}
 #show{display:block;}
 .blink{
  position:relative;
 left:100px;
 width:450px;
height:515px;
background:#000;
padding:15px;
color:white;
display:none;
}
 #blink:hover #blink{
display:block;
visibility:visible;
}
  .hide_show{
position:absolute;
left:15px;
right:15px;
padding:0;
margin:0;
text-align:left;}
</style>
        <body>
        <div id="placeholder" onMouseOver="document.getElementById('blink').style.display = 'block';" onmouseout="document.getElementById('blink').style.display = 'none';">
         <div id="show">## Heading ##</div>
         <div id="blink"><p> some text </p></div>
        </div>
        </html>
    </body>
person Godinall    schedule 05.10.2013
comment
Мне нужно десять очков репутации, чтобы публиковать изображения, как мне получить десять очков репутации, чтобы показывать свои изображения - person Maevea Maverick; 05.10.2013
comment
на самом деле, если вы просто вставите мой предыдущий ответ в свой редактор, он будет работать - person Godinall; 05.10.2013
comment
Спасибо, это работает, можно ли сделать скрытый div с блоком отображения видимым, наоборот, скажем, невидимым, тогда вы хотите, чтобы он был видимым, как display: none; дисплей: блок; Видимость: видимая. Когда я пытался это сделать, невидимый заполнитель не был виден. - person Maevea Maverick; 06.10.2013
comment
Вау, да, наконец-то понял.. Отлично работает, большое спасибо.. Лучший парень.. счастлив, очень счастлив.. - person Maevea Maverick; 06.10.2013
comment
Не забудьте выбрать мой ответ, если вы счастливы :) - person Godinall; 13.11.2013

arrow_upward
0
arrow_downward

Я могу помочь вам сейчас, проблема, просто позвольте мне лучше понять ваш вопрос, когда кто-то наводит указатель мыши на div.show, вы хотите, чтобы этот div как и .blink скрывался? а затем, когда кто-то наводит курсор на .blink, вы хотите, чтобы это отображалось и скрывалось .show?

person swsa    schedule 05.10.2013
comment
да, это еще лучшее решение звучит великолепно, но все еще пытаясь скрыть его, не будет работать на firefox.. - person Maevea Maverick; 05.10.2013