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

时间:2015-03-10 23:59:02

标签: javascript jquery html css css3

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

3 个答案:

答案 0 :(得分:1)

请参阅working fiddle


对于悬停效果 <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来存储标题文字。

&#13;
&#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;
&#13;
&#13;