2

为了练习和训练 CSS，我试图做一些类似的事情： 在此处输入图像描述

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

我正在尝试使用伪类: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"更改？

4

5 回答 5

3

当前 CSS （选择器级别 3）

不幸的是，使用当前的 CSS 标准，您尝试的操作是不可能的。然而，目前有什么可能？

给定以下标记：

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

您可以定位在同一级别（相同父级）的元素并遵循您与之交互的初始元素（例如:hover）。→ 演示

/* 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;
}

未来（选择者级别 4）

选择器级别 4 将（很可能）带来两个令人兴奋的新功能，可以实现您实际尝试做的事情：

1) - 我称之为subject indicator- 它让您确定您想要定位的复合选择器的哪个元素。

!OL > LI:only-child

将针对只有一个列表元素的所有有序列表（看起来很简单，但在当前的 css 中是不可能的）。

2) reference combinator:

label:hover /for/ input

for当通过其属性引用它的标签悬停时，将针对输入元素。

目前尚无任何浏览器支持此功能，但你看，我们可以为在不久的将来 css 等待我们的事情感到兴奋；）

于 2013-07-01T08:17:04.693 回答
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 的新文件。例如：背景颜色.js。您还需要将其与您的 html 页面链接。转到您的 html 页面并在第一个 < script > 标签正下方的 < head > 部分中，键入：

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

html 中的 <head> 部分现在应该如下所示：

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

第 4 步：您需要先对 html 进行一些简单的更改。第二个和第三个 <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，因此它应该可以在任何地方工作。请记住，在移动设备上，您不能将鼠标悬停，因此请尽量不要将其作为您网站的重要组成部分。

于 2013-07-01T04:51:55.870 回答
1

这是我的解决方案

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

$("div p").on("mouseenter", function () {
    $(this).prev().css("background-color", "red");
});
$("div p").on("mouseleave", function () {
    $(this).prev().css("background-color", "inherit");
});
于 2013-07-01T05:51:06.167 回答
0

不幸的是，现代 CSS 没有像“前一个元素”这样的选择器。我们只能在父子元素上使用一些悬停效果的组合，例如在这个演示中：

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>
于 2013-07-01T06:30:17.770 回答
0

这是我的新代码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>
于 2013-06-30T19:14:40.193 回答