Question

所以我创建了一个Web产品组合，但是我试图这样做，以便当我将鼠标悬停在网站的图像上时，我创建了一个边框，使用js，css和html 5.它仍然存在虽然没有运作。

使用Javascript：

 <script type="text/javascript">

   $(document).ready(function(){
    $('a.link_border').hover(
  function () {
    $(this).addClass("img_wrap");
  },
  function () {
    $(this).removeClass("img_wrap");
  });
});

CSS：

.img_wrap {
    border: thick solid #FFFF00;
}
.wrapper {
    height: 210px;
    margin: 5px auto 5px auto;
    padding: 8px auto 3px auto;
    float: left;
    border: thin groove rgba(0,0,0,.2); 
    background: rgba(0,0,0,.1);
    clear: right;
}

HTML：

<div class="wrapper">
    <a class="link_border" href="http://www.aolstudentsonline.com/jasoncameron//wd1/beatrice/index.html" target="_blank"><img src="images/beatriceimg_small.png" width="200" height="200"   alt="Beatrice Salon and Spa"></a> 
        <div class="text">
            <h2>Project: Beatrice Spa and Salon</h2>
            <h3>Type: School Project</h3>
            <h4>Skills Used: HTML, CSS, Javascript/Jquery,                Adobe Photoshop CS6/Illustrator CS6</h4> 
        </div>
</div>

Answer 1

您可以使用:hover伪

在纯CSS 中完成所需的操作

.wrapper:hover a.link_border{
    border: thick solid #FFFF00;
}

<小时/> 如果由于某种原因你需要jQuery做更多疯狂的东西我不知道...

您的选择器a .link_border 应为： a.link_border
.mouseover()方法，不接受 2个回调函数。

请改用：

<script>

$(function(){ // DOM is now ready (shorthand)

    $('a.link_border').hover(function () {
       $(this).toggleClass("img_wrap");
    });

});

</script>

如果您确实希望通过mouseenter方法 mouseleave和.hover()来控制这两个事件：

    $('a.link_border').hover(function() {
       $(this).addClass("img_wrap");
       // other stuff for mouseenter....
    }, function(){
       $(this).removeClass("img_wrap");
       // other stuff for mouseleave....
    });

Answer 2

您的链接和班级之间有空格：

$('a .link_border')

应该是：

$('a.link_border')

另外，将mouseover更改为hover。

Answer 3

您甚至不需要使用JavaScript来执行此操作，只需使用CSS Pseudo Selector [：HOVER]

//将CSS改为此

.wrapper {
    height: 210px;
    margin: 5px auto 5px auto;
    padding: 8px auto 3px auto;
    float: left;
    border: thin groove rgba(0,0,0,.2); 
    background: rgba(0,0,0,.1);
    clear: right;
}
.wrapper:hover {
    border: thick solid #FFFF00;
}

mouseover toggleClass不起作用

3 个答案: