Как показать и скрыть Div OnMouseOver поверх другого DIV

Так что сейчас у меня есть 4 дивы под класс «menubut»Как показать и скрыть Div OnMouseOver поверх другого DIV

Я пытаюсь сделать небольшую накладку, которая показывает при наведении курсора мыши на menubut классов , Я также пытаюсь получить еще один div с именем «red» около десятой части меню, который будет отображаться, когда я навещу над классом в левом углу div.

[   Menubut   ] //When Hovered over it should look like this

[(red) Menubut ] // < at the same time changing the background color of Menubut.

Я довольно новыми для Javascript, поэтому я не уверен, как я бы начать работу на этом.

 <div class = "menubut"> 
      <div class = "red"></div> 
     </div> 
     <div class = "menubut"> 
      <div class = "red"></div> 
     </div> 
     <div class = "menubut"> 
      <div class = "red"></div> 
     </div> 
     <div class = "menubut"> 
      <div class = "red"></div> 
     </div>

И мой CSS для каждого выглядит следующим образом:

.menubut 
{ 
    width: 90px; 
    padding-left: 23px; 
    padding-top: 5px; 
} 

.menubut:hover 
{ 
    background-color: rgba(0, 0, 255, 0.2); 
} 

.red 
{ 
    position: absolute; 
    background-color: red; 
    width: 15px; height: 15px; 
}

Если я могу предоставить больше информации, пожалуйста, дайте мне знать. Спасибо

источник

2015-04-02 user3242614

Это не так ясно, что вы просите. Если вы хотите, чтобы какой-либо элемент изменял стиль при зависании, вы можете использовать: hover, как и вы. Если вы хотите изменить элемент «a», когда вы наводите «b», вы можете использовать событие «onmouseover». Может, что-то вроде этого? https://jsfiddle.net/xe7wv4gp/2/ –

@ZivWeissman Я только что отредактировал выше, если теперь это имеет смысл. У меня есть div, называемый «menubut», и внутри этого div я хочу поместить div под названием «красный» на крайнем левом краю – user3242614

Это простой пример, это может быть сделано гораздо более эффективным с JQuery (вы должны узнать об этом инструменте)

В этом примере, если вы парить над маленькой частью, она изменит цвет на синий, если вы наведите курсор на «обычный» меню, он будет зависать по выбранному вами стилю.

Html:

<div class="menubut" id="menu1"> 
<div class="red" onmouseover="doSomething('menu1')" onmouseout="clearBackground('menu1')"></div> 
</div> 
<div class="menubut" id="menu2"> 
    <div class="red" onmouseover="doSomething('menu2')" onmouseout="clearBackground('menu2')"></div> 
</div> 
<div class="menubut" id="menu3"> 
    <div class="red" onmouseover="doSomething('menu3')" onmouseout="clearBackground('menu3')"></div> 
</div> 
<div class="menubut" id="menu4"> 
    <div class="red" onmouseover="doSomething('menu4')" onmouseout="clearBackground('menu4')"></div> 
</div>

JS:

function doSomething(id) { 
    var ele = document.getElementById(id); 
    ele.style.backgroundColor = 'blue'; 
} 

function clearBackground(id) { 
    var ele = document.getElementById(id); 
    ele.style.backgroundColor = ''; 
}

Working fiddle

источник

2015-04-03 06:07:07

Как показать и скрыть Div OnMouseOver поверх другого DIV

ответ

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