Question

我的想法是我在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。

Answer 1

请参阅working fiddle

对于悬停效果 <li>

li:hover {
    background-color: yellow;
}

标题更改：

$('ul').on({
    mouseenter: function () {
        $('h1').text('This title');
    },
    mouseleave: function () {
        $('h1').text('A title');
    }
});

Answer 2

使用onHover HTML属性并将其指向Javascript方法或代码。

HTML：

<h1 id="title" onHover="changeText()>A title</h1>

使用Javascript：

function changeText(){
    document.getElementById('title').innerHTML = 'You are hovering!';
}

Answer 3

您已经使用jQuery进行了标记，因此请谨慎使用。我还使用HTML Data Attribute来存储标题文字。

＆＃13;

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;

在悬停时更改父div上的文字？

3 个答案: