仅在悬停在对象上时显示图标/按钮的最佳方式是什么？

Question

我有这样的封面图片

当用户将鼠标悬停在我的图片上时，我想：

• 在左上角显示一个相机图标，
• 当鼠标移开时将其隐藏起来。

我试过

CSS

<style type="text/css">

    #cover-img:hover{
        opacity: .9;
    }

    #nav-upload-icon{
        top: 10px;
        left: 10px;
        color: red;
        z-index: 1000;
    }

</style>

HTML

<img id="cover-img" src="/material/img/profile-menu.png" height="130px">
<i id="nav-upload-icon" class="md md-camera hidden"></i>

JS

$("#cover-img").hover(function() {
   $("#nav-upload-icon").removeClass( "hidden" );
});

我无法让它按照我的预期行事。 实现类似的东西的最佳方法是什么？

JSFiddle

Answer 1

如果是实际的html代码，没有理由使用JavaScript，你可以使用悬停的下一个兄弟选择器。

#cover-img:hover + #nav-upload-icon,  
#nav-upload-icon:hover {
    visibility: visible;
}

#nav-upload-icon { 
    visibility : hidden; 
}

Answer 2

绑定mouseout事件以删除再次添加hidden类

$("#cover-img").hover(function() {
    $("#nav-upload-icon").removeClass("hidden");
});
$("#cover-img").mouseout(function() {
    $("#nav-upload-icon").addClass("hidden");
});

将位置absolute放在图像上

Fiddle

转到@epascarello解决方案。这是最好的。

Answer 3

hover接受两个功能：

$("#cover-img").hover(function() {
    $("#nav-upload-icon").removeClass("hidden");
}, function() {
    $("#nav-upload-icon").addClass("hidden");
});

Fiddle

但显然the CSS solution更好。

Answer 4

你几乎就在那里。添加第二个匿名函数以添加mouseleave

的类

$("#cover-img").hover(function() {
    $("#nav-upload-icon").removeClass("hidden");
}, function() {
    $("#nav-upload-icon").addClass("hidden");
});

根据hover()，您可以传递与handlerIn/handlerOut同义的mouseenter/mouseleave

DEMO

Answer 5

如果您不想使用javascript，请在​​图片周围打一个div。

<div class="image-wrap">
   <img > <-- your super cool large image
   <img class="upload"> <- your super cool icon and stuff absolutely positioned with 0 transparency
</div>

然后在CSS中你会这样做

div.image-wrap:hover img.upload {
    opacity:0.9
}

不要打扰javascript，这是2015年

Answer 6

这可以在没有任何JS的情况下实现。使用相邻的选择器，您可以在#cover-img:hover + img { opacity: 1; } 悬停时显示图标。

[Setup]
AppName=My Program
AppVersion=1.5
DefaultDirName={pf}\My Program

[Code]
procedure AboutButtonOnClick(Sender: TObject);
begin
  MsgBox('This is the about message!', mbInformation, mb_Ok);
end;

procedure InitializeWizard;
var
  AboutButton: TNewButton;
begin
  { create an instance of the button and assign it to the local variable AboutButton }
  AboutButton := TNewButton.Create(WizardForm);
  { set the parent to the just created button control }
  AboutButton.Parent := WizardForm;
  { adjust the position to the created button control; it gets the horizontal indent }
  { by the right indent of the Cancel button; the vertical position as well as width }
  { and height are the same as the Cancel button has }
  AboutButton.Left := WizardForm.ClientWidth - WizardForm.CancelButton.Left -
    WizardForm.CancelButton.Width;
  AboutButton.Top := WizardForm.CancelButton.Top;
  AboutButton.Width := WizardForm.CancelButton.Width;
  AboutButton.Height := WizardForm.CancelButton.Height;
  { set its caption }
  AboutButton.Caption := '&About';
  { and assign the AboutButtonOnClick method to the OnClick event of the button }
  AboutButton.OnClick := @AboutButtonOnClick;
end;

Updated Fiddle