我的想法是我在HTML中看起来像这样的东西
<h1> A title </h1>
<h2> Under title <h2>
<ul>
<li> something </li>
<li> something else </li>
<li> something third </li>
我希望这样做,当我将鼠标悬停在“某物”上时 - 该项目本身会有悬停效果,而“A标题”中的文字会更改为“此标题”?和其他列表项相同。
你会怎么做?我一直在搜索CSS和JS中的各种悬停状态。我现在猜测它必须是某种JavaScript。
答案 0 :(得分:1)
对于悬停效果 <li>
li:hover {
background-color: yellow;
}
标题更改:
$('ul').on({
mouseenter: function () {
$('h1').text('This title');
},
mouseleave: function () {
$('h1').text('A title');
}
});
答案 1 :(得分:0)
使用onHover HTML属性并将其指向Javascript方法或代码。
HTML:
<h1 id="title" onHover="changeText()>A title</h1>
使用Javascript:
function changeText(){
document.getElementById('title').innerHTML = 'You are hovering!';
}
答案 2 :(得分:0)
您已经使用jQuery进行了标记,因此请谨慎使用。我还使用HTML Data Attribute来存储标题文字。
var initTitle = $("#target").html();
$("ul li").hover(function() {
$(this).addClass("active");
$("#target").html($(this).data("title")).addClass("active");
},
function() {
$(this).removeClass("active");
$("#target").html(initTitle).removeClass("active");
}
);
&#13;
/*Change what you want to in here for your hilite effect*/
.active {
color: #f00;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1 id="target"> A title </h1>
<h2> Under title <h2>
<ul>
<li data-title="First Title"> something </li>
<li data-title="Second Title"> something else </li>
<li data-title="Third Title"> something third </li>
<ul>
&#13;