Создание полного смены div на hover

У меня есть изображение, которое работает правильно, но оно меняет цвет только после того, как оно зависнет. Например, я хочу, чтобы div однажды зависал, он изменит изображение.Создание полного смены div на hover

Я не хочу нависать над самим изображением, и он меняется только, что он делает.

HTML:

<div class="navigation-box">          
     <div class="sidehead"><i class="lock"></i>header 1</div>         
      <div class="navLinks"> 
       <ul class=""> 
        <li>1</li> 
        <li>2</li> 
        <li>3</li> 
       </ul> 
      </div>   
</div>

CSS:

.lock { 
    background: url('../images/lock.png') no-repeat center; 
    display: inline-block; 
    width: 30px; 
    height: 30px; 
    text-align: center; 
    vertical-align: middle; 
    margin-top:-5px; 
    margin-left:5%; 
} 

li:hover .lock{ 
    background: url("../images/lock-hover.png") no-repeat center;  
}

Fiddle

В скрипку, вы увидите, что я говорю. Я просто хочу, чтобы div sidehead однажды зависал, чтобы изменить изображение lock. Есть идеи, что я делаю неправильно?

источник

2014-10-31 kris

Заменное изображение белого на белом ... так что вы не можете его увидеть - http: // jsfiddle.net/acvLkepv/ –

Позвольте пояснить. Вы хотите, чтобы он постоянно менялся после зависания?Таким образом, если вы вытаскиваете элемент из элемента, это все еще белое изображение? –

Я знаю. Это не то, о чем я говорил, ха-ха! Я пытаюсь найти его там, где я навешиваю «заголовок 1», и изображение изменится. Это не так. Мне нужно перейти к самому изображению, чтобы увидеть изменение изображения. Я хочу, чтобы иметь возможность зависать в любом месте над div, и это изменит это изображение. – kris

У вас есть селектор немного неправильно.

Если вы хотите что-то произойдет, когда вы наведите курсор мыши на .sidehead DIV, что там, где вы должны положить парения

.sidehead .lock { 
 
    background: url('http://uploadir.com/u/il2433z4') no-repeat center; 
 
    display: inline-block; 
 
    width: 30px; 
 
    height: 30px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    margin-top:-5px; 
 
    margin-left:5%; 
 
} 
 
.sidehead:hover .lock { 
 
    background: grey url("http://uploadir.com/u/4js58y48") no-repeat center; 
 
} 
 
.sidehead { 
 
    border:1px solid green; /* for visual refernece */ 
 
}

<div class="navigation-box"> 
 
    <div class="sidehead"><i class="lock"></i>header 1</div> 
 
    <div class="navLinks"> 
 
     <ul class=""> 
 
      <li>1</li> 
 
      <li>2</li> 
 
      <li>3</li> 
 
     </ul> 
 
    </div> 
 
</div>

источник

2014-10-31 21:58:50

Это не работает, потому что CSS can't select a parent. Ваш CSS читается, когда вы наводите курсор на элемент списка, дочерний .lock что-то сделает. Это где JQuery приходит Вы можете написать что-то вроде этого:.

$('li').hover(function(){ 
    $('.lock').addClass('newClass'); 
});

CSS:

.newClass { 
    background: url("../images/lock-hover.png") no-repeat center; 
}

Это просто пример, и не включает в себя, когда вы наведете за пределами списка, но он должен помогите двигаться вперед.

источник

2014-10-31 21:52:37 austinthedeveloper

Вы можете использовать JavaScript. Таким образом, вы можете использовать mouseout и mouseover события работать парения:

$(".navigation-box").mouseover(function(){ // White image 
    $(".lock").css("background"," url('http://uploadir.com/u/4js58y48') no-repeat center") 
}); 
$(".navigation-box").mouseout(function(){ // Black image 
    $(".lock").css("background"," url('http://uploadir.com/u/il2433z4') no-repeat center") 
});

Here is an example. Примечание. Я изменил цвет фона тела, чтобы изменения были очевидны.

Или вы можете сделать:

.navigation-box:hover > .sidehead > .lock { 
    background: url("http://uploadir.com/u/4js58y48") no-repeat center; 
}

For example

источник

2014-10-31 22:02:02

Вы можете легко сделать это с помощью JQuery

Я бы посоветовал, чтобы дать вашему LI класс (или ваш уль)

$('li').on('mouseenter mouseleave', function(e) { 
    $('.lock').trigger(e.type); 
});

Этот код вызывает событие hover для каждого .lock-объекта, когда li (добавьте id и/или классы, если вы хотите сделать это немного точнее, но это должно быть довольно прямолинейно)

источник

2014-10-31 22:03:03

Создание полного смены div на hover

ответ

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