Question

我知道这段代码错了。当我将鼠标放在网页的某个段落上时，我希望所有<p>元素在我的HTML中获得颜色cornflowerblue。我使用其他方式做了同样的事情，但我怎么能用on()做到这一点？

jQuery：我知道还有其他方法可以做到这一点，但我想尝试使用on()。我为这个功能命名，但我很确定这不正确。

ChangeColorOnHover("p")
$(document).ready(function ChangeColorOnHover(elementtype) {
    $element = $(elementtype)
    $element
    .on({
        mouseenter: function (event) {
            var $this = $(this)
            $this.addClass(".IsHover")
        }
    })
    .on({
        mouseleave: function () {
            var $this = $(this)
            $this.removeClass(".IsHover")
        }
    })
})

CSS：

.container {
    font-family: sans-serif;
    font-weight: 100;
    max-width: 960px;
    margin: 20px auto;
}
p {
    color: tomato;
    margin-top: 2em;
}
p.IsHover{
    color:cornflowerblue;
}

HTML :( csstestview是外部CSS文件的名称）。 HTML正在认识到CSS文件，我已经探测过了。

@Styles.Render("~/bundles/csstestview")  
<div id="firstdiv" class="divvv">
  <img src="/images/Soccer.jpg" width="60" height="60" alt="soccer icon" />
  <p id="pp" class="pa"> this is a <em>paragraph</em></p>
  <p>paragraph testing</p>
</div>

Answer 1

$(function () {
    var ChangeColorOnHover = function(elementtype) {
        //Select all elements
        $element = $(elementtype);
        //Set up event handlers
        $element.on('mouseenter', function() {
            //No need for . when adding a class
            $(this).addClass("IsHover");
        });
        $element.on('mouseleave', function() {
            //No need for . when removing a class
            $(this).removeClass("IsHover");
        });
    };

    //Call your function
    ChangeColorOnHover("p");

});

Answer 2

首先：使用addClass时，您不需要将.放入.isHover，只需添加isHover。如果那不是＆＃39;你可以尝试做的工作： $(event.target).addClass("isHover")

Answer 3

当前的jQuery v2.2.3具有.mouseenter（）和.mouseleave（）处理程序。根据您的代码，可以按如下方式使用：

$element.mouseenter( function() { $(this).addClass('IsHover'); } );
$element.mouseleave( function() { $(this).removeClass('IsHover'); } );

或者你可以让CSS为你做这一切。作为CSS中的一个例子，您可以：

p:hover { color: cornflowerblue; }

Answer 4

您应该在语句(...)之外定义命名函数，并且只使用.on()一次：

function ChangeColorOnHover(elementtype) {
    var $element = $(elementtype);

    $element.on({
        mouseenter: function (event) {
            var $this = $(this)
            $this.addClass("IsHover")
        },
        mouseleave: function () {
            var $this = $(this)
            $this.removeClass("IsHover")
        }
    })
};

$(document).ready(function(){
    ChangeColorOnHover("p")
})

.container {
font-family: sans-serif;
font-weight: 100;
max-width: 960px;
margin: 20px auto;
}
p {
    color: tomato;
    margin-top: 2em;
}
p.IsHover{
            color:cornflowerblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Paragraph 1</p>
<p>Paragraph 2</p>

Answer 5

你可以通过纯粹的CSS来实现这个目标。但这正是你要找的。 jsfiddle demo

$(function() {
  $(document).on('mouseenter', 'p', function() {
    $(this).addClass('IsHover');
  }).on('mouseleave', 'p', function() {
    $(this).removeClass('IsHover');
  });
});

如果您想使用函数执行此操作，则应在$(function(){});之外声明函数，然后在网站加载时使用内部函数。

function changeColorOnHover(element) {
  $(document).on('mouseenter', element, function() {
    $(this).addClass('IsHover');
  }).on('mouseleave', element, function() {
    $(this).removeClass('IsHover');
  });
}

$(function() {
  changeColorOnHover('p');
});

使用.on（）Jquery函数

5 个答案: