Размер фона (CSS3) не работает должным образом

#main{ 
position: relative; 
height: 60px; 
} 

#exit{ 
float: left; 
background: url(exit.jpeg) no-repeat; 
width: 230px; 
height: 230px; 
background-size: 60px 60px; 
opacity: .5; 
} 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <link rel="stylesheet" href="style.css"> 
</head> 
<body> 
    <div id="wrap"> 

     <!-- TOP --> 
     <header id="main"> 
      <a href="#" id="exit"></a> 
      <h1>Temp</h1> 
     </header> 

     <!-- MENU --> 
     <nav id="menu"> 
      <ul> 
       <li><a href="#">temp 2</a></li> 
       <li><a href="#">temp 3</a></li> 
       <li><a href="#">temp 4</a></li> 
       <li><a href="#">temp 5</a></li> 
      </ul> 
     </nav> 


    </div> 
</body> 
</html>

Это работает, но не так, как должно быть. Изображение меняет размер, но когда я наводил на него курсор, я также могу переместить указатель мыши туда, где было изображение, до того, как оно было изменено, и функция hover по-прежнему вызывает вызов.Размер фона (CSS3) не работает должным образом

источник

2013-06-08 Nilzone-

background size влияет на размер фона (как ни странно), но не размер фактического элемента.

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

Если вы хотите, чтобы эффект зависания применялся только к области, покрываемой фоновым изображением, вам необходимо изменить размер всего элемента на этот размер, а не только на фоновое изображение.

источник

2013-06-08 21:34:31 Spudley

Размер фона (CSS3) не работает должным образом

ответ

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