Проблема с наведением изображения CSS в Chrome и IE - PullRequest
Новая
       0

Проблема с наведением изображения CSS в Chrome и IE

2 голосов
/ 02 сентября 2011

У меня проблема с отображением скрытого изображения при наведении указателя мыши на изображение с помощью CSS-наведения в Chrome и IE, но оно отлично работает в Firefox.Вот моя ссылка: https://www.solarisdutamas.com/fb/Elvieloon/welcome1.php

Вот моя кодировка: 

<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" media="screen" href="css-hover.css" />
</head>
<title>Elvie Loon</title>
<meta content="Professional Makeup Artist and Hair Stylist" name="description">
<style type="text/css">
.over .pic1 {
   display:none;
   visibility:hidden;
}
.over:hover .pic1 {
   display:inline;
   visibility:visible;
   position:absolute;
   top:250px;
   left:100px;
   z-index:11;
}
</style>
<body style="margin: 0px; width: 520px;">
<img src="landing-page.jpg" usemap ="#fly1map" />

<a class="over"> 
  <map name="fly1map">
    <area shape="poly" coords="387,339,433,365,416,376,425,395,371,393,391,369,387,339" href="">
  </map> 
  <img src="pic-1.png" class="pic1">  
</a>
</body>
</html>

Пожалуйста, помогите, спасибо.

Ответы [ 3 ]

2 голосов
/ 02 сентября 2011

Вместо видимости попробуйте это ... 

#something:hover
{
    opacity:1; //100% opacity
    filter:alpha(opacity=100);
}

#something 
{
    opacity:0; //0% opacity
    filter:alpha(opacity=0);
}

Ps Обе строки внутри оператора делают одно и то же, нижний фильтр - это просто способ IE сделать это.

0 голосов
/ 02 января 2013

Существует известная ошибка в Chrome и IE8, связанная с: hover и z-index для элементов с абсолютным позиционированием.

Chrome: выпуск 83533

0 голосов
/ 02 сентября 2011

Проблема в том, что вы не можете наводить курсор на скрытый элемент (см. Почему не работает видимость CSS? ).

Две идеи ...

1. Вы можете использовать технику с двумя изображениями.Помимо вашего изображения, создайте прозрачное изображение того же размера.Затем переверните их при наведении курсора мыши. 

<html>
<head>
</head>
<style type="text/css">
    .flipimage { border:solid 1px pink; height:65px; width:65px; background-image:url("blank.jpg"); } 
    .flipimage:hover { border:solid 1px pink; height:65px; width:65px; background-image:url("truck.jpg"); } 
</style>


<body style="margin: 0px; width: 520px;">

    <div class="flipimage"></div>

</body>
</html>

2. Этот подход требует некоторой дополнительной разметки, но по существу он размещает <div> над изображением.При наведении курсора на <div> он перемещается под изображением с помощью z-index. 

<html>
<head>
   <style type="text/css">
    .placeholder{ background-color:pink; height:64px; width:64px; position:absolute; z-index:99; }
    .placeholder:hover { z-index:-1; }
    .over { position:absolute; z-index:1;}
   </style>
</head>

<body style="margin: 0px; width: 520px;">

    <div>
        <div class="placeholder"></div>
        <a class="over"><img src="vcard.jpg" class="pic1"></a>
    </div>

</body>
</html>
...