吹き出し前の縦線CSS

Question

私は、サイト上のパスが上がったときに画像を表示しようとしています。 ホバー部分がうまく機能します。しかし、私がパスを「マウスアウト」すると、イメージは削除されますが、赤い垂直線が常に存在します。

は私がdisplay : "none"イベント"mouseout"を設定するためにDOMを使用しようとしました：推移していない

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

：

推移

この

は私のCSSですトリガーされます。しかし、第2の写真にあなたが見ることができるものを示す前に、ラインは常に短時間表示されます。

何か助けていただければ幸いです。

UPDATE：パスをホバリングするとき、私は簡単にこの赤い線を得た私はなぜ理解：イメージがURLであるとロードされるためです。そして、それが読み込まれるまで、CSSは何も「境界に接している」。今はロードされないうちに何も表示しないようにしていますが、どうしたらいいですか？

UPDATE 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

は当初コンテンツを非表示にします。

.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 2

これは、表示されている3pxの幅の枠線です。この問題の代わりに画像のボックスシャドウスタイルを指定します。

Answer 3

使用通常の状態では

border: 0px solid #3c2c2d; 

、そしてあなたのホバー状態で

border: 3px solid #3c2c2d; 

。

jqueryを使用してホバースタイルを追加する場合は、jquery .css()メソッドを使用します。 ; `縦線のようにそれを作っているオート：.imageElu``の境界線は、かつて私はそれがとても `幅の内側に何も持っていないと思います

・ホープ、このヘルプ