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 回答