Question

我正在尝试将悬停效果同时应用于两个不同的元素，这意味着当我将鼠标悬停在一个元素上时，我也是另一个具有悬停效果的元素。这两个元素是一个简单的文本和一个图标（使用字体很棒）。有什么方法可以用html和css这样做吗？或者我需要使用javascript吗？

非常感谢！

Answer 1

我认为这就是你的意思。如果是，那么这是迄今为止最简单的方法。

HTML：

<body>
    <button class="button">Click Me!</button>
    <p class="text">Hello World</p>
</body>

CSS：

.button:hover{      //To change button color
    background-color: #436242;
}

.button:hover + .text{ //To change text color
    background-color: #436242;
}

所以只需添加＆＃34; +＆＃34;然后第二个div。

Answer 2

你可以用css做，因为alireza告诉你，但你需要一个严格的HTML代码。到目前为止，最简单的方法是jquery，并且很容易实现和理解。

使用此代码：

$('.element').on('hover', function(){
    $('.element').toggleClass('hover');
});

您只需将班级hover添加到您悬停的班级element的任何元素中。然后只需将css属性添加到类hover：

.hover {
   color:red; 
}

<强> JSFIDDLE

已修改：阅读评论后...如果您想为每个元素提供不同的hover效果，那么就像使用此html一样简单：

<p class="element text">Text</p>     
<p class="element icon"></p>

你只是toggleClass元素的不同类，如：

$('.element').on('hover', function(){
    $('.text').toggleClass('hover1');
    $('.icon').toggleClass('hover2');
});

<强> NEW JSFIDDLE

要将它添加到您的项目中，请不要忘记脚本标记和加载功能（jsfiddle自动执行）：

<script type="text/javascript">
        $(document).ready(function () {
             $('.element').on('hover', function(){
             $('.element').toggleClass('hover');
             }); 
        });
    </script>

如何将悬停效果应用于2个不同的元素

2 个答案: