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

希望這有幫助