Question

我有以下html：

<div class="parent">
  <div class="sibling" data-modal=".child"></div>
  <div class="child"></div>
</div>

当我将鼠标悬停在sibling元素上时，其边框会改变颜色并导致child显示。无论是兄弟姐妹还是孩子，我都希望保持这种风格。

我可以使用JS将css永久添加到兄弟姐妹，然后在mouseleave上删除它，但如果可能的话，更喜欢css解决方案

CSS：

.parent {
  position:relative;
  width:250px;
  height:200px;
  background-color: #f1f1f1;
}
.sibling {
  width:100px;
  height:30px;
  padding:6px;
  border:4px solid red;
}
.sibling:hover {
  border-color: green;
}
.child {
  position: absolute;
  width:200px;
  height:50px;
  top:70px;
  background: blue;
  display: none;
}

这可能吗？

Here's a fiddle

Answer 1

我不确定我是否帮助你，但这是你需要的东西吗？

.parent {
    position:relative;
    width:1000px;
    height:200px;
}
.sibling {
    width:100px;
    height:30px;
    padding:8px;
    border:1px solid red;
}
.sibling:hover {
    border-color: blue;
}
.sibling:hover + .child {
    display: block;
}
.child {
    position: absolute;
    width:200px;
    height:50px;
    top:60px;
    background: blue;
    display: none;
}

<div class="parent" data-modal="child">
    <div class="sibling"></div>
    <div class="child">test</div>
</div>

纯css解决方案

Answer 2

是，

将悬停条件添加到父级。

.parent {
  position:relative;
  width:250px;
  height:200px;
  background-color: #f1f1f1;
}
.sibling {
  width:100px;
  height:30px;
  padding:6px;
  border:4px solid red;
}
.parent:hover .sibling, /* here */
.sibling:hover {
  border-color: green;
}
.child {
  position: absolute;
  width:200px;
  height:50px;
  top:70px;
  background: blue;
  display: none;
}

<div class="parent">
  <div class="sibling" data-modal=".child"></div>
  <div class="child"></div>
</div>

Answer 3

是的可能

＆＃13;

$( ".parent" ).mouseenter(function() {
    var divName = $(this).data('modal');
    $(divName).fadeIn('fast').animate({
      'top': '30px'
    }, {duration: 'slow', queue: false}, function() { /*Animation complete*/ });
  });

＆＃13;

.parent {
    position:relative;
    width:1000px;
    height:200px;
}
.parent:hover .sibling{border-color: #000;}
.sibling {
    width:100px;
    height:30px;
    padding:8px;
    border:1px solid red;
}
.child {
    position: absolute;
    width:200px;
    height:50px;
    top:60px;
    background: blue;
    display: none;
}

＆＃13;

<div class="parent" data-modal="child">
    <div class="sibling"></div>
    <div class="child"></div>
</div>

＆＃13;

Answer 4

你不需要javascript，存在纯CSS解决方案。参考CSS选择器和＆＃34; +＆＃34;选择器是控制兄弟类所需要的。

所以在你的情况下，

.sibling:hover + .child{
    display:block;
}

在兄弟级别上架时控制子类。

＆＃13;

.parent {
  position: relative;
  width: 1000px;
  height: 200px;
  background: pink;
}
.sibling {
  width: 100px;
  height: 30px;
  padding: 8px;
  border: 1px solid red;
  background: blue;
}
.child {
  position: absolute;
  width: 200px;
  height: 50px;
  top: 60px;
  background: green;
  display: none;
}
.sibling:hover {
  border: 3px solid green;
}
.sibling:hover + .child {
  display: block;
}

＆＃13;

<div class="parent" data-modal="child">
  <div class="sibling"></div>
  <div class="child"></div>
</div>

＆＃13;

希望这有帮助

悬停在父母身上可以保持儿童悬停效果吗？

4 个答案: