悬停 CSS 前的垂直线

Question

我试图在网站上的路径悬停时显示图像。 悬停部分运行良好。 但是，当我“鼠标移出”路径时，图像被删除，但始终存在红色垂直线。

这是我的 css：

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

不悬停时：

悬停时：

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

任何帮助表示赞赏。

更新：我明白为什么我在悬停路径时会短暂地看到这条红线：这是因为图像是一个 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 的边框，将您的图像样式设置为 box-shadow 作为此问题的替代方案。

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()方法。

希望这有帮助