Geek asks and answers

SVG Image element flickers on hover

I have an svg image element on my site. I want to hide this image on hover and show it on the mouse.

But I have a strange problem that the image flickers when you hover over the mouse.

I tried to hide the image, although css and jquery. In both approaches, I found the same error.

Svg

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <image x="20" y="20" class="imghideshow" width="300" height="80"
     xlink:href="http://cdn1.iconfinder.com/data/icons/musthave/128/Help.png" />
</svg>

CSS

.imghideshow:hover
{
    visibility:hidden;
}

http://jsfiddle.net/GMd8w/

Please help me fix the flicker problem. All I want to do is hide the image on hover and show it on the mouse.

Edited script based on the answers below.

A well-implemented opacity solves a flickering problem. But reproduces another problem when I implemented this css property.

So let me explain my complete requirement.

. ( ,) . , js. , . .

http://jsfiddle.net/VwmEU/

:

, , .

.

+5
2

, , . , , .

.imghideshow:hover
{
    opacity: 0;
}

, , .

, . . , , .

CSS

#img2 {
    pointer-events: none;
}
#img1 {
    cursor:pointer;
}
#img1:hover ~ #img2 {
    opacity: 0;
}

( , ...), : , ( ), , , 3 . - 3 .

+10

- , :

SVG

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg">
    <g class="first">
      <!-- Both images here -->
      <rect x="25px" y="25px" width="150" height="100" class="green" />
      <rect x="50px" y="50px" width="150" height="100"/>
    </g>
    <g class="hover">
       <!-- The hover state -->
        <rect x="25px" y="25px" width="150" height="100" class="green" id="click" />
    </g>
</svg>

JQuery

$('.first').mouseenter(function() {
    $(this).hide();
    $('.hover').show();
});

$('.hover').mouseleave(function() {
   $(this).hide();
    $('.first').show();
});

$('#click').click(function() {
   alert('clicked'); 
});

. fiddle.

+1

More articles:


All Articles