Question

更具体地说，当我将光标悬停在图片上时，它会转换为不同的图片。或者我真正想要的是：当我将鼠标悬停在文本上时，它会变成不同的文字。

感谢。

Answer 1

是的，您将使用DOM事件mouseenter和mouseleave。更改图像源。

或者你可以像这样使用CSS :hover psuedo-class：

<div class="derp"></div>

.derp {
    background-image:url(someURL);
}
.derp:hover {
    background-image:url(someOtherURL);
}

Answer 2

是的，使用CSS :hover伪选民最简单。

#theimage {
  display: block;
  width: 400px;
  height: 400px;
  background: url('image1.png') 0 0 no-repeat;
}

#theimage:hover {
  background: url('image2.png') 0 0 no-repeat
}

如果你想做更复杂的事情，你可以使用Javascript，它可以使用更复杂的逻辑和访问属性和属性，如图像标记的src。

JSFiddle

您可能还需要预加载图像，以便在第一次悬停时（清除缓存后）没有延迟。使用Javascript做得最好：

<script>
  (new Image).src = 'image2.png';
</script>

Answer 3

对于更改文本，您可能希望使用JS。你可以这样做：

<script type=text/javascript>
    function changetext()
    {
        var textchange2 = "new text" ;
        var id = document.getElementById("ElementToChange");
        id.innerHTML=textchange2;
    }

    function changetextback()
    {
        var textchange2 = "original text" ;
        var id = document.getElementById("ElementToChange");
        id.innerHTML=textchange2;
    }
</script>
<div id="ElementToChange" onmouseover="changetext();" onmouseout="changetextback();">original text</div>

Answer 4

是的，这是Javascript的标准函数来处理HTML DOM事件。使用简单的HTML / Javascript，您可以附加一个onmouseover事件处理程序来运行Javascript函数：

<html>
<head>
    <script>
        function changeText(obj){
            // https://developer.mozilla.org/en-US/docs/Web/API/Node.textContent
            obj.textContent = "some new text";

            // you could also use obj.innerHTML here, but 
            // that comes with security considerations
            // https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML
        }
    </script>
</head>
<body>
<div id="mydiv" onmouseover="changeText(this)">Some text</div>
</body>
</html>

Javascript框架中也有便利功能，比如jQuery：

$(obj).text('Some new text from jQuery');

请注意，您需要在<head>块中包含jQuery库才能使用它。

通过内联属性（如onmouseover）将事件处理程序附加到DOM事件可能会导致从长远来看更难管理代码。通过代码附加事件监听器更好：

<html>
<head>
    <script>
        function changeText(event){
            // the Event object - here called event as a variable name
            // is passed implicitly
                event.target.textContent = "some new text";
            }

            window.onload = function(){
                document.getElementById("mydiv")
                    .addEventListener("mouseover", changeText, false );
            }
    </script>
</head>
<body>
<div id="mydiv">Some text</div>
</body>
</html>

jQuery让它变得简单：

$(document).ready(function() {
    $("#mydiv")
        .on( "mouseover", function(event){
            $(event.target).text('some new text');
    });
});

我建议您使用Google Javascript教程并浏览HTML / Javascript初学者教程。 Mozilla开发者网络是一个开始学习的好地方：

https://developer.mozilla.org/en-US/

如果您真的对此感兴趣，请查看NodeJS以获取服务器端Javascript：

http://nodejs.org/

在html或JS中是否存在一种方式，以便当我将鼠标悬停在某些内容上时会发生变化？

4 个答案: