Question

在Facebook上例如 - 当您将鼠标悬停在新闻项目上时，会出现删除按钮。我怎样才能实现这一目标？

谢谢，埃利奥特

Answer 1

现代浏览器

在现代浏览器中，您可以在我们的选择器中利用:hover伪类。例如，请考虑以下标记：

<div class="item">
  <p>This is a long string of text</p>
  <div class="adminControls">
    <a href="#" title="Delete">Delete Item</a>
  </div>
</div>

默认情况下，我们希望隐藏.adminControls。但是，一旦用户悬停.item元素，它们就会变得可见：

.item .adminControls {
    display: none;
}

.item:hover .adminControls {
    display: block;
}

JavaScript和jQuery

如果您正在使用jQuery，则可以使用$ .hover（）方法轻松完成此操作。如果您使用的是Prototype，则可以protoHover plugin获得相同的结果，或者查看this blog post。

$("div.item").hover(
  function () { $(this).find(".adminControls").show(); }, 
  function () { $(this).find(".adminControls").hide(); }
);

这将完成以下的显示/隐藏效果：

<div class="item">
  <p>This is a long string of text</p>
  <div class="adminControls">
    <a href="#" title="Delete">Delete Item</a>
  </div>
</div>

<div class="item">
  <p>This is a long string of text</p>
  <div class="adminControls">
    <a href="#" title="Delete">Delete Item</a>
  </div>
</div>

<div class="item">
  <p>This is a long string of text</p>
  <div class="adminControls">
    <a href="#" title="Delete">Delete Item</a>
  </div>
</div>

Answer 2

如果您不需要支持IE6，可以使用：hover伪类，如下所示：

CSS：

.link { display: none; }
.item:hover > .link { display: inline; }

HTML：

<div class="item">
  <a href="#" class="link">Remove</a>
  Lorem Ipsum...
</div>

Answer 3

根据您的喜好定位链接，以便在悬停时显示，然后使用JavaScript隐藏它并使用onmouseover事件进行显示。（即，它是display: none;，然后在display: block;事件被触发时转为onmouseover。

这样的事情：

window.onload = function(){
    document.getElementById('mylink').style.display = 'none';
    document.getElementById('mydiv').onmouseover = function(){
        document.getElementById('mylink').style.display = 'block';  
    }
}

Answer 4

您需要编写一个操作DOM的Javascript函数，并且需要将HTML元素的OnMouseOver属性与该函数相关联。例如，在我的主页上，每当鼠标滚过它时，我脸部的图像就会改变。 Javascript函数在HTML页面本身中定义。

<script type="text/javascript">
<!--
faceCnt = 7;
var faces = new Array( faceCnt ); 
var faceDates = new Array( "1982", "1986", "1991", "1999", "2004", "2006", "2009" );
var faceIdx = 7; /* So that first change is to earliest one. */
for( var idx = 0 ; idx < faceCnt ; idx++ )
  (faces[idx] = new Image(150, 116)).src = "david/david" + (idx + 1) + ".jpg";

function nextFace( ref )
{
  faceIdx = faceIdx >= faceCnt - 1 ? 0 : faceIdx + 1;
  ref.src = faces[ faceIdx ].src;
  ref.title = "David-" + faceDates[ faceIdx ];
}
//-->
</script>

<img id="myface" src="david/david7.jpg" alt="david" title="David-2009" 
 width="150" height="116" 
 style="margin: 0 0 5px 15px; /* -10px -5px 10px 10px; */
  padding: 0;
   border: solid black;
   border-width: 1px;
   float: right;" 
  onMouseOver="nextFace( this )"
  onClick="nextFace( this )" >

编辑div鼠标悬停上的链接

4 个答案:

现代浏览器

JavaScript和jQuery