在MouseOver上以html格式显示图像


130

我想在用户将鼠标悬停在图像上时显示文本。

如何在HTML / JS中执行此操作?

Answers:



16

您可以
在此处使用CSS悬停 链接到jsfiddle:http : //jsfiddle.net/ANKwQ/5/

HTML:

<a><img src='https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcQB3a3aouZcIPEF0di4r9uK4c0r9FlFnCasg_P8ISk8tZytippZRQ'></a>
<div>text</div>

CSS:

div {
    display: none;
    border:1px solid #000;
    height:30px;
    width:290px;
    margin-left:10px;
}

a:hover + div {
    display: block;
}​

4

您也可以这样做:

HTML:

<a><img src='https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcQB3a3aouZcIPEF0di4r9uK4c0r9FlFnCasg_P8ISk8tZytippZRQ' onmouseover="somefunction();"></a>

在javascript中:

function somefunction()
{
  //Do somethisg.
}


3

您可以将CSS悬停与图像背景结合使用。

的CSS

   .image
{
    background:url(images/back.png);
    height:100px;
    width:100px;
    display: block;
    float:left;
}

.image  a {
    display: none;
}

.image  a:hover {
    display: block;
}

的HTML

<div class="image"><a href="#">Text you want on mouseover</a></div>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.