悬停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"。但是，在显示第二张照片中可以看到的内容之前，始终会短暂显示该行。

感谢任何帮助。

更新：我理解为什么在悬停路径时我会短暂地得到这条红线：这是因为图片是网址并正在加载。直到它没有加载，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

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

Answer 2

最初隐藏内容。

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

当div悬停时，你需要设置border属性。

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

Answer 3

使用

border: 0px solid #3c2c2d;

处于正常状态，

border: 3px solid #3c2c2d; 

处于悬停状态。

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

希望这个帮助