0

我正在尝试在翻转时为图像添加边框。当我翻转图像时,边框不显示。这是我的代码:

<script>
$(document).ready(function() {
    $("#imgBorder").hover(
        function() { $(this).addClass("Hover"); },
        function() { $(this).removeClass("Hover"); }
    );
});
</script>
Hover { border: 1px solid #000; }
<div id="imgBorder"><a href="#">link...</a>

为什么悬停时没有出现边框?

另外,有没有办法做到这一点,以便在添加边框时不会重新调整图像大小?

4

4 回答 4

2

您不需要使用 javascript 在图像翻转上添加悬停。只需将其添加到 css 类即可。

<style language="text/css">
.rollOver : hover
{
    border: 1px solid #000;
}
</style>

<div class="rollOver" id="imgBorder">Test</div>
于 2012-04-11T20:47:19.040 回答
1

首先,要影响图像,您的 jQuery 应该是:

$("#imgBorder img").hover(
    function() { $(this).addClass("Hover"); },
    function() { $(this).removeClass("Hover"); }
);

你的 CSS 应该是:

.Hover { /* note the period preceding the 'Hover' class-name */
    border: 1px solid #000;
}

JS 小提琴演示

注意:

  • .string通过类名选择元素string<div class="string"></div>
  • #string通过它的 选择一个元素,id它等于string <div id="string"></div>
  • string选择 的元素string<string></string>

但是您不需要 JavaScript,只需使用:

#imgBorder:hover img,
#imgBorder img:hover {
    border: 1px solid #000;
}

JS 小提琴演示

于 2012-04-11T20:48:42.723 回答
0

在下面的选择器中,您要定位一个标记名为“Hover”的元素。这不存在。

Hover { border: 1px solid #000; }

你想要的是:

.Hover { border: 1px solid #000 }

正如这里的其他人已经指出的那样,您不需要 JavaScript,因为您可以使用:hover伪类:

img { border: 1px solid #FFF }
img:hover { border-color: #000; }

如需进一步阅读,请参阅http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes

于 2012-04-11T20:49:17.907 回答
0

像这样的东西可以在 CSS 中使用,链接如下

.rollover_img {
width: 280px;
height: 150px;
background-image: url(land.jpg); 
background-position: top;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border:10px solid #ccc;
font:13px normal Arial, Helvetica, sans-serif;
line-height:18px;
float:left;
margin:0 10px 10px 0;
}

我将引导您到以下链接

http://aceinfowayindia.com/blog/2010/02/how-to-create-simple-css-image-rollover-effect/

于 2012-04-11T20:46:58.597 回答