Question

我在div中有一个链接。在链接内（之间），我显示了文本。当光标悬停在链接上时，我想更改该文本。

***我忘记提及的一件事是我希望暂时更改文本（即，只有将其悬停时才更改）。

这是我的JSFiddle：https://jsfiddle.net/ZEZEME/kapt4sL6/5/

这就是我的代码。

HTML

<div id="imgDiv"></div>

CSS

#imgDiv {
width: 200px; 
height:200px; 
background-color: gray;
}

JS

var title = "World War II Plane Crashes in National Parks";
var url = "https://www.nps.gov/articles/WWIIPlaneCrashes.htm"

$(imgDiv).append($('<a href="' + url + '" id=link>'+ title +'</a>'));

（我正在使用API，而.append是创建链接的方式。我需要在JavaScript中动态创建指向div的链接。）

这是我尝试过的：

$(imgDiv).append($('<a href="' + url + '" id=link>'+ title +'</a>').css('text-decoration', 'none').hover(function(e) { 
        console.log($(e.target).text("NEWWW"));
}));

这将永久更改文本（而不是仅悬停在上方）。

$(imgDiv).append($('<a href="' + url + '" id=link>'+ title +'</a>').css('text-decoration', 'none').hover(function(e) { 
    function(e) {
        console.log($(e.target).text("NEWWW"));
    }, 
    function(e) {
        console.log($(e.target).text("OLDDD"));
    }

这给我一个错误。有人可以帮忙吗？

Answer 1

您可以使用mouseover来检测鼠标何时在链接上移动，然后可以使用mouseout来查看何时鼠标离开链接。

您还希望使用text()，因为val()用于表单字段。

var title = "World War II Plane Crashes in National Parks";
var url = "https://www.nps.gov/articles/WWIIPlaneCrashes.htm"

$('#imgDiv').append($('<a href="' + url + '" id=link>'+ title +'</a>'))

// Create an event to watch "a" tags
$('#imgDiv a').on('mouseover', (e) => {
  $(e.target).text('I am some new text')
})
// Comment this out if you don't want it to go back on mouse out.
.on('mouseout', (e) => {
  $(e.target).text(title)
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}
#imgDiv {
  width: 200px; 
  height:200px; 
  background-color: gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imgDiv"></div>

如何使用Javascript

1 个答案: