Наведите, над и .png картинки с прозрачным фоном

Question

Наведите, над и .png картинки с прозрачным фоном

0

Пожалуйста, посмотрите на http://users.sch.gr/ellhn/. Код HTML за этой страницей выглядит следующим образом:

      #squared1.over {
      background: green;
     cursor: pointer;
     }

     #squared2{
  position: absolute;
  left: 250px;
  cursor: pointer;
     }
 </style>
 </head>
 <body>
 <img src="img/squared1.png" id="squared1" width="195" height="147" class="rollover">
 <img src="img/squared1.png" id="squared2" width="195" height="147"   
  class="rollover">     

 <script src="js/shaperollover.js"></script>    

 <script>
 $( "#squared2" ).hover(
        function() {
           $( this ).animate( { left:300 }, 500 );
           }, 
       function() {
           $( this ).animate( { left:250 }, 500 );
           }
    );

    </script>
  </body>
  </html>

Я буду сумасшедшим. У меня нет возможности исчезнуть с этого проклятого прозрачного фона. Конечно, проблема состоит в том, что (как вы можете видеть на странице) эффект зависания начинается за пределами видимой части, что приводит к прозрачному фону. На первом рисунке, применяя Javascript-плагин (shaperollover.js), эффект начинается в нужном месте, однако это верно только через свойство css (# squared1.over - если честно, я не знаю этого свойства). Unfortunatery, JQuery hover или mouseover функция рассматривает всю картину с фоном, и она работает как вторая.

Есть ли способ встроить это свойство в jquery или каким-то образом извлечь выгоду из этого плагина? Я хочу добавить анимацию при наведении, и это невозможно с помощью чистого CSS. Или что-то более простое, я не знаю, чтобы делать снимки без фона? большое спасибо

Unknown developer 19 окт. 2013, в 18:39

Источник

0

Рассматривали ли вы сделать CSS3 графику?
Josh Powell 19 окт. 2013, в 16:33
0

Вы пытаетесь сохранить зеленый фон при наведении мыши на второе изображение? Ваше объяснение мне неясно.
OBV 19 окт. 2013, в 16:46
0

Я хочу, чтобы hover запускался только тогда, когда мышь находится над видимой частью изображения, а не над прозрачной.
Unknown developer 19 окт. 2013, в 17:28

Показать ещё 1 комментарий

Теги:

javascript

jquery

css

2 ответа

Ещё вопросы

Рассматривали ли вы сделать CSS3 графику?
Вы пытаетесь сохранить зеленый фон при наведении мыши на второе изображение? Ваше объяснение мне неясно.
Я хочу, чтобы hover запускался только тогда, когда мышь находится над видимой частью изображения, а не над прозрачной.

Elimn · Answer 1 · 2013-10-19T15-36-00.000Z

Это то, что вы хотели сделать? Это использует CSS3, но было бы легко реализовать в JavaScript, если это ваше желание.

<div class="funky-image"><img src="http://users.sch.gr/ellhn/img/squared1.png" alt="" />
.funky-image, .funky-image img{
    transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
}

.funky-image:hover{
    padding-left:300px;
}
.funky-image:hover img{
    background-color:#0f0;
}

Если это не цель, можете ли вы быть более конкретным относительно того, что вы хотите достичь? Это очень неясно.

Я хочу, чтобы эффект парения был активирован только тогда, когда мышь находится над видимой частью изображения, а не над прозрачной.
Непрямоугольные области парения могут быть выполнены с помощью карт изображений. Лучший ответ на этот вопрос должен помочь вам начать правильный путь: stackoverflow.com/questions/745110/…

codeninja · Answer 2 · 2013-10-19T14-28-00.000Z

Прежде всего, нет никакой собственности.over, о которой я знаю, возможно, вы имели в виду

#squared1:hover{
   //properties here
}

Во-вторых, если я не ошибаюсь, большинство или все.png имеют прозрачный фон.

Через jQuery вы можете что-то сделать через событие.hover, например:

$('#idOfElement').hover(function(){
  $(this).animate({left: 250}, 500);
})

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

Извините, что неясно. Обратите внимание на 2 изображения, где срабатывает эффект наведения. Я хочу, чтобы меня уволили только тогда, когда мышь находится над видимой частью изображения, а не над прозрачной. Кроме того, если я заменю # squared1.over на # squared1: hover, первое изображение не будет работать так, как я хочу. Тем не менее, я не понимаю, что означает # squared1.over ...
Это невозможно, вы видите, что изображение является квадратом, и вы не можете придать ему нужную форму, вы можете сделать его кругом и другими многоугольниками с помощью некоторого CSS / Javascript, но вы не можете сформировать изображение как это.