削除を同じ行に表示する方法は？

Question

私の部門では、名前があり、削除されています。それは次のように私のウェブサイトに表示されます。

1.jpg delete 

のdivの私のhtmlコードは次のとおりです。

<div id="files1" class="files"> 
    <b class='dataname' >1.jpg</b> 
    <span class='delimg' >delete</span> 
</div>; 

そしてdelimg CSSのコードは次のとおりです。私は非表示に削除したい

.delimg{ 
    margin-left:20px; 
    color:#090; 
    cursor:pointer 
} 

最初はdisplay:noneが追加されましたdelimg CSS：

.delimg{ 
    margin-left:20px; 
    color:#090; 
    cursor:pointer; 
    display:none 
} 

したがって、名前1.jpgにマウスを重ねると、削除が表示される可能性があります。名前1.jpgをマウスで削除すると、削除が消えるはずです。

$(document).ready(function() { 
    $('.files').hover(function() { 
     $('.delimg').css("display","block"); 
    }); 
}); 

しかし、削除は次のように、名前1.JPG後ろ名1.JPGをしませunderingと変わっていた示した：：私はそれを実現するためにhoverを使用しようとした私は、ことがわかったほか

1.jpg 
delete 

マウスを名前から外すと、削除されたままになります。私は属性表示がblockに変更されていることを知っているので、削除はまだそこにあります。私はmouseroverとmouseroutメソッドを試していました。マウスオーバー時に削除が表示される可能性があります。しかし、マウスを削除すると、マウスを一度に削除すると削除が消えるため、削除をクリックできませんでした。

Answer 1

これを達成するためにJavaScriptを使用する必要はありません。あなたは直接CSSでそれを行うことができます：あなたはinline-blockに代わりblockを使用しているため

.files:hover .delimg{ 
    display: inline-block; 
} 

また、それは以下の表示されていることを理由があります。ここでは実施例である：あなたが削除スパンのデフォルトdisplayプロパティを復元したい場合は

.delimg { 
 
    margin-left:20px; 
 
    color:#090; 
 
    cursor:pointer; 
 
    display:none 
 
} 
 
    
 
.files:hover .delimg { 
 
    display: inline-block; 
 
}

<div id="files1" class="files"> 
 
    <b class='dataname' >1.jpg</b> 
 
    <span class='delimg' >delete</span> 
 
</div> 
 
<div id="files2" class="files"> 
 
    <b class='dataname' >2.jpg</b> 
 
    <span class='delimg' >delete</span> 
 
</div>

Answer 2

ではなく、これを試してみてください。もう一度display:noneを適用するためにmouseoutを使用しました。

$(document).ready(function(){ 
$('.files').mouseover(function(){ 
$('.delimg').css("display","unset"); 
}); 
$('.files').mouseout(function(){ 
    $('.delimg').css("display","none"); 
}); 

}）; あなたの問題を解決したかどうか教えてください。

Answer 3

私は理解して次の2つの問題を抱えている：

1. マウスが削除リンクを置いたときには、隠された取得していません。この場合

   は、ソリューションは、あなたのコード内でこの行にjqueryのtoggle方法を使用することです：$('.delimg').css("display","block"); ので、追加のCSSプロパティdisplay: blockが戻って切り替えますので、リンクが続いてマウスオーバーで隠すことができ削除されること。

2. 2番目の問題は、deleteリンクが新しい行のjpgになることです。 あなたのCSSファイルとイベントコールバックメソッドでdisplay: blockの代わりにdisplay: inline-blockプロパティを使用することです。

ただし、残りの回答が示すとおり、純粋なCSSを使用してこのすべてを行うことができます。

これはあなたの質問にお答えします。