CODEWITHSUNDEEP
javascriptcsshover
Lawris
Lawris

Reputation: 1035

Vertical line before hover CSS

I'm trying to show an image when a path on the site is hovered. The hover part works well. However, when I "mouseout" the path, the image is removed but a red vertical line is always there.

This is my css :

.imgElu {
    height: 23%;
    width: auto;
    position: absolute;
    bottom: 33.1%;
    left: 36.7%;
    border-radius: 50%;
    border: 3px solid #ac2c2d;
}

When not hovered : enter image description here

When hovered :

enter image description here

I tried to use DOM to set display : "none" when the event "mouseout" is triggered. But the line is always briefly displayed before showing what you can see in the second photo.

Any help is appreciated.

UPDATE : I understood why I got this red line briefly when hovering a path : it's because the image is an url and is loading. And until it's not load, the css is "bordering" nothing. Now I'm searching to show nothing until it's not loaded, how can I do that ?

UPDATE 2 : this is my js code :

siege[0].addEventListener("mouseover", function() { //when mouseover

  var actualImg = siege.Vignette; //gets the url Image
  document.getElementById("photoElu").src = siege.Vignette; //puts the url on the img div

  if (eluPresent == false) {
    $('<p class="tooltip"></p>').text("Siège non occupé").appendTo('body').fadeIn('slow');
  } else { //If there is something to show :
    $('<p class="tooltip"></p>').text("Siège n°"+siege.Seat+" "+siege.Name).appendTo('body').fadeIn('slow');

    document.getElementById('photoElu').style.border = "3px solid #ac2c2d"; //sets the css to the img div



  }

  siege.animate(hoverStyle, animationSpeed);


}, true);

siege[0].addEventListener("mouseout", function() { //when mouseout


  $('.tooltip').remove();
  document.getElementById("photoElu").src = ""; //remove the url
  siege.animate(style, animationSpeed);
  document.getElementById('photoElu').style.border = "0px solid #ac2c2d"; //sets the css to remove the border


}, true);

Upvotes: 2

Views: 697

Answers (3)

Rajan Benipuri
Rajan Benipuri

Reputation: 1832

Use 

border: 0px solid #3c2c2d;

In your normal state, and 

border: 3px solid #3c2c2d;

in your hover state.

If you are adding hover style using jquery, use jquery .css() method.

Hope this help

Upvotes: 0

bruce182
bruce182

Reputation: 311

Initially hide the content.

    .imgElu {
        height: 23%;
        width: auto;
        position: absolute;
        bottom: 33.1%;
        left: 36.7%;
        border-radius: 50%;
        border: none;
        display: none;
    }

You need to set border property when the div is hovered.

    .imgElu:hover {
       border: 3px solid #ac2c2d;
       display: /*your display setting*/
    }

Upvotes: 0

hemantmetal
hemantmetal

Reputation: 107

It's a border which is 3px in width that is being displayed, give your image style of box-shadow as an alternative to this problem.

Upvotes: 1

Related Questions