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

My idea is that i have something that looks like this in HTML

我的想法是我在HTML中看起来像这样

<h1> A title </h1>

<h2> Under title <h2>
<ul>
<li> something </li>
<li> something else </li>
<li> something third </li>

I wish to do so that when i hover over "something" - there is a hover effect on that item itself, AND the text in "A Title" changes to something else like "This title" ?? and the same for the other list items.

我希望这样做，当我将鼠标悬停在“某物”上时 - 该项目本身会有悬停效果，而“A Title”中的文字会更改为“此标题”？和其他列表项相同。

How would you go about this?? I have been searching for various hover states both in CSS and JS.. I am guessing now that it would have to be some kind of JavaScript.

你会怎么做？我一直在寻找CSS和JS中的各种悬停状态..我现在猜测它必须是某种JavaScript。

3 个解决方案

#1

See working fiddle

看工作小提琴

For the hover effect on the <li>

对于

的悬停效果

li:hover {
    background-color: yellow;
}

For the title change :

对于标题更改：

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

#2

Use the onHover HTML attribute and point it to a Javascript method or code.

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

HTML:

HTML：

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

Javascript:

使用Javascript：

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

#3

You've tagged with jQuery so lets go with that with a little css. I've also use the HTML Data Attribute to store the title text.

你用jQuery标记了所以让我们用一点css。我还使用HTML数据属性来存储标题文本。

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");
  }
);

/*Change what you want to in here for your hilite effect*/

.active {
  color: #f00;
}

<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>

#1