Javascript 在另一个div上悬停时显示和隐藏按钮

我想在将鼠标悬停在某个div上时更改CSS样式。但不是针对悬停的div，而是另一个div。悬停时应显示另一个div，而不悬停该div时，不应显示另一个div

这是我到目前为止的代码，但不知怎么的，这一个只在div输入上运行

这就是我迄今为止所尝试的：

.lebenslauf_rubrik li div + .lebenslauf_textteil_buttons
{
    display: none!important;
}

.lebenslauf_rubrik li div:hover + .lebenslauf_textteil_buttons
{
    display: block!important;
}

不要被其他css代码所迷惑。这只是用来设置元素样式的！：）

我想隐藏buttons类

.lebenslauf\u textteil\u buttons

，但不将鼠标悬停在li元素后的第一个div上。悬停时，请显示按钮

.lebenslauf\u textteil\u zeile{
显示：内联块；
宽度：100%；
边缘底部：10px；
边缘顶部：10px；
填充物：5px；
边框：1px实心橙色；
}
.lebenslauf_textteil_zeile分区：第n个孩子（1）{
右边距：10px；
浮动：左；
z指数：10；
宽度：150px；
最大宽度：160px；
空白：nowrap；
}
lebenslauf_textteil_zeile分区：第n个孩子（2）{
浮动：左；
z指数：10；
宽度：365px；
最大宽度：375px；
空白：nowrap；
}
lebenslauf_rubrik li：第一个孩子。可排序的{
颜色：白色！重要；
背景色：白色；
指针事件：无！重要；
}
lebenslauf_rubrik li：最后一个孩子。可排序的跑步者{
颜色：白色！重要；
背景色：白色；
指针事件：无！重要；
}
.lebenslauf_textteil_按钮{
浮动：对；
宽度：240px；
最大宽度：260px；
空白：nowrap；
}
.lebenslauf_sortieren_按钮{
填充：6px 13.5px！重要；
}
lebenslauf_rubrik先生{
填充：0px！重要；
列表样式类型：无！重要；
}
.lebenslauf_rubrik li div+.lebenslauf_textteil_按钮{
显示：无！重要；
}
.lebenslauf_rubrik li div:hover+.lebenslauf_textteil_按钮{
显示：块！重要；
}

名称
马克斯·穆斯特曼


名称
拉尔夫

我认为使用javascript比使用css更容易

js:

function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

<button onmouseover="myFunction()" onmouseleave="myFunction()">Click Me</button>
<div id="myDIV">
    This is my DIV element.
</div>

html:

function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

<button onmouseover="myFunction()" onmouseleave="myFunction()">Click Me</button>
<div id="myDIV">
    This is my DIV element.
</div>

点击我
这是我的DIV元素。

我认为使用javascript比使用css更容易

js:

function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

<button onmouseover="myFunction()" onmouseleave="myFunction()">Click Me</button>
<div id="myDIV">
    This is my DIV element.
</div>

html:

function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

<button onmouseover="myFunction()" onmouseleave="myFunction()">Click Me</button>
<div id="myDIV">
    This is my DIV element.
</div>

点击我
这是我的DIV元素。

以下是jQuery解决方案： 别忘了添加jQuery

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

.lebenslauf\u textteil\u zeile{
显示：内联块；
宽度：100%；
边缘底部：10px；
边缘顶部：10px；
填充物：5px；
边框：1px实心橙色；
}
.lebenslauf_textteil_zeile分区：第n个孩子（1）{
右边距：10px；
浮动：左；
z指数：10；
宽度：150px；
最大宽度：160px；
空白：nowrap；
}
lebenslauf_textteil_zeile分区：第n个孩子（2）{
浮动：左；
z指数：10；
宽度：365px；
最大宽度：375px；
空白：nowrap；
}
lebenslauf_rubrik li：第一个孩子。可排序的{
颜色：白色！重要；
背景色：白色；
指针事件：无！重要；
}
lebenslauf_rubrik li：最后一个孩子。可排序的跑步者{
颜色：白色！重要；
背景色：白色；
指针事件：无！重要；
}
.lebenslauf_textteil_按钮{
浮动：对；
宽度：240px；
最大宽度：260px；
空白：nowrap；
}
.lebenslauf_sortieren_按钮{
填充：6px 13.5px！重要；
}
lebenslauf_rubrik先生{
填充：0px！重要；
列表样式类型：无！重要；
}
.lebenslauf_rubrik li div+.lebenslauf_textteil_按钮{
显示：无；
}

名称
马克斯·穆斯特曼


名称
拉尔夫

以下是jQuery解决方案： 别忘了添加jQuery

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

.lebenslauf\u textteil\u zeile{
显示：内联块；
宽度：100%；
边缘底部：10px；
边缘顶部：10px；
填充物：5px；
边框：1px实心橙色；
}
.lebenslauf_textteil_zeile分区：第n个孩子（1）{
右边距：10px；
浮动：左；
z指数：10；
宽度：150px；
最大宽度：160px；
空白：nowrap；
}
lebenslauf_textteil_zeile分区：第n个孩子（2）{
浮动：左；
z指数：10；
宽度：365px；
最大宽度：375px；
空白：nowrap；
}
lebenslauf_rubrik li：第一个孩子。可排序的{
颜色：白色！重要；
背景色：白色；
指针事件：无！重要；
}
lebenslauf_rubrik li：最后一个孩子。可排序的跑步者{
颜色：白色！重要；
背景色：白色；
指针事件：无！重要；
}
.lebenslauf_textteil_按钮{
浮动：对；
宽度：240px；
最大宽度：260px；
空白：nowrap；
}
.lebenslauf_sortieren_按钮{
填充：6px 13.5px！重要；
}
lebenslauf_rubrik先生{
填充：0px！重要；
列表样式类型：无！重要；
}
.lebenslauf_rubrik li div+.lebenslauf_textteil_按钮{
显示：无；
}

名称
马克斯·穆斯特曼


名称
拉尔夫

将鼠标悬停侦听器添加到

li

元素中，该元素将向要显示的按钮添加类，并添加鼠标悬停侦听器以删除该类以及该类中的样式。这样，这种风格只会在鼠标悬停在li元素上时应用。“但不知何故，这种风格只会在鼠标悬停在div输入上时起作用”-

。lebenslauf\u textteil\u按钮

是您的

。lebenslauf\u textteil\u输入

元素的兄弟，因此它按设计工作。“当不在li元素后的第一个div上悬停时。”-如果关系打赌，那么不要使用兄弟组合符