悬停CSS前的垂直线

Question

当站点上的一条路径被悬停时，我试图显示一个图像。悬停部分运行良好。然而，当我“按下”路径时，图像会被移除，但红色的垂直线总是在那里。

这是我的css：

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

不盘旋的时候：

​

盘旋时：

​

​

当事件display : "none"被触发时，我尝试使用DOM来设置"mouseout"。但是，在显示第二张照片中所看到的内容之前，这一行总是简短的显示。

任何帮助都是非常感谢的。

UPDATE：我理解为什么在悬停路径时我得到了这条红线:这是因为图像是一个url并且正在加载。在没有加载之前，css没有“边缘”任何内容。现在我在搜索什么都没有显示，直到它没有加载，我怎么能这样做？

更新2：这是我的js代码：

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

Answer 1

这是一个边框，宽度为3px，正在显示，给您的图像样式的框-阴影作为替代这个问题。

Answer 2

最初隐藏内容。

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

当div悬停时，您需要设置边框属性。

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

Answer 3

使用

border: 0px solid #3c2c2d;

在你正常的状态下

border: 3px solid #3c2c2d; 

在你的悬停状态下。

如果要使用jquery添加悬停样式，请使用jquery .css()方法。

希望能帮上忙