javascript - 鼠标悬停切换类不起作用

Question

所以我创建了一个 Web Portfolio，但我正在努力做到这一点，以便当我将鼠标悬停在我创建的网站图像上时，使用 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 pseudo

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

如果您真的想通过 .hover() 方法控制这两个事件 mouseenter 和 mouseleave :

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