如何为鼠标悬停时出现的按钮添加点击事件

Question

我有两个问题：

1. 我想在特定位置的图像mouseover 事件上在图像周围显示 6 个按钮。有可能吗？

2. 是否可以为这些按钮编写onclick 事件？

我没有任何网页设计经验。我使用了下面的代码

Javascript：

function showIt(imgsrc)
{
document.getElementById('imageshow').src=imgsrc;
document.getElementById('imageshow').style.display='';
}

function hideIt()
{
document.getElementById('imageshow').style.display='none';
}

HTML：

<input type="button" id="imageshow" Onclick="onClickFunc()" style="display:none" value="Button1"/>&nbsp;&nbsp;&nbsp;
<input type="button" id="imageshow" Onclick="onClickFunc()" style="display:none" value="Button2"/>&nbsp;&nbsp;&nbsp;
<input type="button" id="imageshow" Onclick="onClickFunc()" style="display:none" value="Button3"/><br>
<img src="Images/Image1.jpg" onmouseover="showIt(this.src)"><br>
<input type="button" id="imageshow" Onclick="onClickFunc()" style="display:none" value="Button4"/>&nbsp;&nbsp;&nbsp;
<input type="button" id="imageshow" Onclick="onClickFunc()" style="display:none" value="Button5"/>&nbsp;&nbsp;&nbsp;
<input type="button" id="imageshow" Onclick="onClickFunc()" style="display:none" value="Button6"/>

但是当我从图像中mouseout 时，按钮正在消失。如果我删除 onmouseout 事件，按钮将保持不变，只是我不想这样做。而且我真的不知道如何在图像周围放置 6 个按钮。我打算这样做：

所以请帮助我。谢谢

Answer 1

是的，为什么不！！！

1. 当鼠标悬停在特定位置的图像上时，我想在图像周围显示 6 个按钮。可能吗？ ANS :- 为每个按钮提供与“imgBtn”相同的类，并使其默认不显示。在图像上鼠标烤箱的时候你可以写代码

在 jquery 中像：-

jQuery('#imageID').hover(function(){
    jQuery('imgBtn').show();
})

在javascript中：

将此行粘贴到

中的 img 标签上

onmouseover="document.getElementsByClassName("redText").style.visibility = 'visible';"

---

1. 是否可以为这些按钮编写 onclick 事件？我没有任何网页设计经验。所以请帮助我。谢谢

答：是的，您可以在 onclick 按钮上编写任何函数，例如：

jQuery('#buttonID').click(function(){

    //button functionality
}) 

Answer 2

将图像设置为一个 div 的背景。在该 div 中创建另一个 div 并在其中编写 6 个按钮的代码。

通常为此按钮 div 设置 display:none，当从 javascript 函数悬停该图像时，您可以从 javascript 设置 display:block，然后图像上将显示六个按钮。

以下是为按钮添加onclick事件的代码。

<button type="button" Onclick="alert('hai')">Click Me!</button>

Answer 3

是的，这是可能的，您要做的就是根据需要定义所有六个按钮，并设置样式为 display:none 的属性，并且当您将鼠标悬停在图像上以及想要显示所有六个图像时，然后调用一个函数onmouseover 并以这种方式设置display:none 属性display:'' 当您将鼠标悬停在图像上时，所有图像都会显示

第二个你可以用每个按钮写onClick，它会正常工作。

希望对你有用。

这将是六个按钮中每个按钮的代码

<input type="button" id="btn1" Onclick="onClickFunc()" style="display:none" value="Button1" />

Answer 4

好的，我想到的唯一解决方案是使用图像映射和 jquery。

我已经构建了一个粗略的演示，您可能需要根据您的要求对其进行增强。

这是demo

除了中间的那个之外的所有框都是图像映射。当您将鼠标悬停在任何图像地图上时，我会在 jquery 的帮助下显示一个按钮。