Question

对于练习和训练CSS我试图做类似的事情： enter image description here

换句话说，我正在尝试这样的事情：当我将鼠标悬停在第三段时，第二段需要获得如图所示的颜色。

我正在尝试将伪:hover和:before（或:after）content属性设置为""，设置background } #E7A51B和opacity到0.3，但它不起作用。

HTML需要像这样：

<body>
    <div class="app">
        <p> First paragraph </p>
        <div class="active">
            <p> Second paragraph </p>
        </div>
        <br>
        <div>
            <p> Third paragraph </p>
        </div>
    </div>
</body>

编辑：感谢大家的评论。阅读你的评论我想知道这可能是一些更通用的方法，例如：
如果我将鼠标悬停在元素class="foo1"元素的背景上，而class="foo2"会更改？

Answer 1

当前CSS (Selectors Level 3)

使用当前的CSS标准，不幸的是你正在尝试的是不可能的。但是，目前还有什么可能呢？

给出以下标记：

<div class="app">
    <p> First paragraph </p>
    <p> Second paragraph </p>
    <p> Third paragraph </p>
</div>

您可以定位同一级别（同一个父级）的元素，并按照您与之交互的初始元素（例如:hover）。 → Demo

/* targeting the direct descending sibling of the 3rd paragraph*/
p:nth-of-type(3):hover + p{
    color:red;
}
/* targets the 4th paragraph when hovering the second */
p:nth-of-type(2):hover ~ p:nth-of-type(4){
    color:blue;
}
/* targets all paragraphs being siblings of the first paragraph */
p:first-of-type:hover ~ p{
    color:green;
}

未来(Selectors Level 4)

选择器等级4（最有可能）带来两个令人兴奋的新功能，可以实现，你实际尝试做什么：

1） - 我会称之为 - subject indicator - 让你确定，你想要定位的复合选择器的哪个元素。

!OL > LI:only-child

会定位所有只有一个列表元素的有序列表（看起来很简单，但目前的css是不可能的）。

2）reference combinator：

label:hover /for/ input

会定位一个输入元素，当通过它的for属性引用它的标签被悬停时。

目前还没有任何浏览器支持，但是你知道，我们可以很高兴在css的不久的将来等待我们;）

Answer 2

CSS中的hover方法只有在您希望将鼠标悬停在元素上并更改该特定元素的颜色时才会起作用，它将无法更改单独的元素。换句话说，您需要做一些简单的JQuery。如果您不熟悉JQuery，请不要担心，我将引导您完成所需的步骤。如果您熟悉Jquery并且已经拥有该库，请跳至步骤3，我将为您提供使其正常工作的确切代码。这看起来非常漫长而痛苦，但这只是因为我想尽可能地彻底。它实际上非常简单

第1步：如果您不知道JQuery是什么，那么JavaScript就是以更简单（在我看来）的语法中重写的。但是，为了让JQuery正常工作，您需要在jquery.com免费下载库（语法）。当您访问该网站时，单击下载选项卡，然后下载压缩的JQuery生产版本。当您单击它以下载它时，将打开一个包含所有代码的页面。将其全部复制并粘贴到文本编辑器中，并使用 .js 扩展名保存。例如：jquery-library.js。提示：确保它与您正在使用的所有其他html和css文档位于同一文件夹中。

第2步：将您的html链接到您下载的Jquery库：

<head>    
<script type="text/javascript" src="the name of your jquery library file.js"></script>
</head>

第3步：在文本编辑器中使用.js扩展名创建新文件。例如：background-color.js。您还需要将其与您的html页面链接。转到您的html页面和＆lt;头＆gt;第一个＆lt; 下面的部分脚本＆gt;标签，输入：

<script type="text/javascript" src="the name of your javascript file.js"></script>

你的＆lt;头＆gt; html中的部分现在应该如下所示：

<script src="the name of your jquery library file.js"></script> <script src="the name of your javascript file.js"></script>

第4步：您需要先对html进行一些简单的更改。第二和第三＆lt; p>元素都需要类，以便JQuery可以识别它们：

<div class="app"> <p> First paragraph </p> <div class="active"> <p class="second"> Second paragraph </p> </div> <br> <div> <p class="third"> Third paragraph </p> </div>

第5步：现在为JQuery。如果您不理解语法，可以将其复制并粘贴到.js文档中，这是可以的：提示：我添加了注释以尽可能多地解释每个字符串。 //后面的任何内容都是注释。

$(document).ready(function(){ // <-- this string tells the browser to perform the following action once the page has fully loaded $(".third").mouseenter(function(){ $(".second").css("background-color", "#9CF"); // change this css color to whatever background color you want }); // when the mouse enters the class "third", the background color of the class "second" // changes to #9CF $(".third").mouseleave(function(){ $(".second").css("background-color", "#FFF"); //change this css color to whatever your default background is }); // when the mouse leaves the class "third", the background color of the class "second" // changes back to default

}）;

我希望这有帮助。让我知道如果某些东西不起作用，但我在safari和firefox中测试它，它是非常基本的JQuery所以它应该在任何地方工作。请注意，在移动设备上，您无法悬停，因此请尽量不要将其作为您网站的重要组成部分。

Answer 3

Here是我的解决方案

我的目标是创建一个不需要对页面的HTML进行任何工作的解决方案。我还试图创建一个适用于各种场景的解决方案。为此，我必须使用.prev()方法。

$("div p").on("mouseenter", function () {
    $(this).prev().css("background-color", "red");
});
$("div p").on("mouseleave", function () {
    $(this).prev().css("background-color", "inherit");
});

Answer 4

这是我的新代码jquery

在你的HTML中

我添加了课程last

http://jsfiddle.net/K4RFX/1/

$('.last').mouseover(function() {
$('.active p').css('background','#f00');
});
$('.last').mouseout(function() {
$('.active p').css('background','none');
});


<body>
    <div class="app">
        <p> First paragraf </p>
        <div class="active">
            <p> Second paragraf </p>
        </div>
        <br>
        <div class="last">
            <p> Third paragraf </p>
        </div>
    </div>
</body>

Answer 5

不幸的是，现代CSS没有像'previous element'这样的选择器。我们只能对父元素和子元素使用悬停效果的某些组合，例如demo：

<强> CSS

  .wrapper:hover p:first-child {
        background: red;    
    }
    .wrapper p:first-child:hover {
        background: none;    
    }

的 HTML

<div class="wrapper"> <p>The 2nd parapraph</p> <p>The 3rd parapraph</p> </div>

CSS将鼠标悬停在一个段落上，更改前一个段落的背景

5 个答案:

当前CSS (Selectors Level 3)

未来(Selectors Level 4)