Vertical line before hover CSS

Question

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 :

When hovered :

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);

I think this vertical line is the border of `.imageElu` once not hovered I think it has nothing inside so `width: auto;` is making it like a vertical line. To help us better understand can you post your style or js for hover state, — Rajan Benipuri, Oct 30 '17 at 10:05

score 1 · Answer 1 · answered Oct 30 '17 at 10:05

1

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.

answered Oct 30 '17 at 10:05

hemantmetal

107
10

score 0 · Answer 2 · edited Oct 30 '17 at 10:14

0

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*/
    }

edited Oct 30 '17 at 10:14

pmaddi

449
5
18

answered Oct 30 '17 at 10:05

bruce182

311
4
13

I made an update that can maybe help you solve my problem. – Lawris Oct 30 '17 at 10:15

score 0 · Answer 3 · answered Oct 30 '17 at 10:20

0

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

answered Oct 30 '17 at 10:20

Rajan Benipuri

1,772
1
9
21

Alright, so you are seeing this red line once you hover the element and before the image is fully loaded, right? If that's the case please show us the jquery you are using there. – Rajan Benipuri Oct 30 '17 at 10:23
I only see the red line when I hover the element for a very brief time... Check my second update. – Lawris Oct 30 '17 at 10:30

Vertical line before hover CSS

3 Answers3