Question

我正在尝试在翻转时为图像添加边框。当我滚动图像时，边框没有显示。这是我的代码：

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

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

另外，有没有办法这样做，以便在添加边框时不会重新调整图像大小？

Answer 1

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

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

<div class="rollOver" id="imgBorder">Test</div>

Answer 2

首先，为了影响图像，你的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 Fiddle demo

请注意：

.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 Fiddle demo

Answer 3

这样的东西可以在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/

Answer 4

在下面的选择器中，您要定位标记名为“悬停”的元素。这不存在。

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

如何在悬停时为图像添加边框？

4 个答案: