将鼠标悬停在一个列表元素上，影响 div Only CSS答案

【问题标题】：Hover over one list element, affect a div Only CSS将鼠标悬停在一个列表元素上，影响 div Only CSS
【发布时间】：2016-04-02 15:46:35
【问题描述】：

好的，所以我有一个元素列表，一旦我将鼠标悬停在其中一个上，我希望“文本框 div”的内容相应地改变。我在网上看了一遍又一遍，没有一个结果有帮助

  <div class="parent">
    <div class="tohover" id="m1"><a href=#>Home</a></div>
    <div class="tohover" id="m2"><a href=#>Mail</a></div>
    <div class="tohover" id="m3"><a href=#>Sports</a></div>
    <div class="tohover" id="m4"><a href=#>Movies</a></div>
    <div class="centermenu">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel molestie nulla, eu tincidunt purus. Phasellus eget ligula orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque mollis varius ex et</p>
    </div></div>

css 部分类似于：

.centermenu {
  background-color: #F9F9F9;
  position: relative;
  float: left;
  width: 1000px;
  margin-top: 70px;
  margin-left: 40px;
  border: 1px solid #606060;
  height: auto;
  color: black;
  word-wrap: break-word; 
}

p {
  padding: 5px;
  text-indent: 10px;
}

.tohover > a {
  color: black;
}

#m1:hover ~ .centermenu {
  background-color: red;
}

但它不起作用。它什么也没做。任何想法为什么？这〜适用于图像，但现在不再适用了。

我正在考虑使用 ::before ::after 但它们不会替换我想要的文本...

【问题讨论】：

没有 JavaScript 就无法做到。 CSS 中还没有父选择器，因此您无法通过悬停链接或列表项来访问 div。
我在几周前发布了这个。 stackoverflow.com/questions/35972663/… 我也想做同样的事情，但要使用一个列表，我将从中心菜单更改文本。我该怎么做？它不工作，但它之前工作过
您其他问题中的 HTML 结构与您上面的完全不同，这会有所不同。
我知道这是重复的..但是其中一个...有这么多可供选择？ :)
我也有点指定它是重复的，但我没有在其他任何人中找到我的答案，我正在寻找使用 ~ 不起作用的具体原因

标签： html css hover html-lists

【解决方案1】：

这个解决方案怎么样。不过你最好的选择是 jQuery/javascript。
https://jsfiddle.net/vp02x56o/7/

HTML

<div class="parent">
    <div class="tohover" id="m1"><a href=#>Home</a></div>
    <div class="tohover" id="m2"><a href=#>Mail</a></div>
    <div class="tohover" id="m3"><a href=#>Sports</a></div>
    <div class="tohover" id="m4"><a href=#>Movies</a></div>
    <div class="centermenu" id="c1">
        <p>1111111111</p>
    </div>
    <div class="centermenu" id="c2">
        <p>222222222222222</p>
    </div>
    <div class="centermenu" id="c3">
        <p>3333333333</p>
    </div>
    <div class="centermenu" id="c4">
        <p>4444444444444444</p>
    </div>
</div>

CSS：

    .centermenu {
      display:none;
      background-color: #F9F9F9;
      position: relative;
      float: left;
      width: 1000px;
      margin-top: 70px;
      margin-left: 40px;
      border: 1px solid #606060;
      height: auto;
      color: black;
      word-wrap: break-word; 
    }

    p {
      padding: 5px;
      text-indent: 10px;
    }

    .tohover > a {
      color: black;
    }

    #c1.centermenu {
      display: block;
    }


    #m1:hover ~ #c1 {
      display: block;
    }


    #m2:hover ~ #c2 {
      display: block;
    }
    #m2:hover ~ #c1 {
      display: none;
    }


    #m3:hover ~ #c3 {
      display: block;
    }
    #m3:hover ~ #c1 {
      display: none;
    }


    #m4:hover ~ #c4 {
      display: block;
    }
    #m4:hover ~ #c1 {
      display: none;
    }

【讨论】：

这可行，我只需要一个默认文本，它会一直保留在那里，直到我将鼠标悬停在菜单上

【解决方案2】：

只有 CSS 才能达到这一点。只有在<ul> 内移动“.centerermenu” div。但是例如使用 javascript 或 Jquery 真的很容易

【讨论】：

我以前用照片做过stackoverflow.com/questions/35972663/… 出于某种原因，它现在不起作用，我不明白为什么。我只想使用 css
你以前做过，因为所有元素都在同一级别上。在此示例中，元素位于不同级别。当您将
移动到
内时，您可以实现它
我做了一些改动。现在怎么样？他们都是同一个父母的孩子

【解决方案3】：

如前所述，jQuery 是你最好的选择，但你可以做这样的事情，虽然我不推荐它，

https://jsfiddle.net/eor0gmsg/

.centermenu {
  background-color: #F9F9F9;
  position: relative;
  float: left;
  width: 1000px;
  margin-top: 70px;
  margin-left: 40px;
  border: 1px solid #606060;
  height: auto;
  color: black;
  word-wrap: break-word; 
}

p {
  padding: 5px;
  text-indent: 10px;
}

.tohover > a {
  color: black;
}

#m1:hover ~ .centermenu:before  {
  background-color: red;
   content: "Lorem ipsum";

}

#m1:hover ~ .centermenu{
  color:white;
}

【讨论】：

哈哈是的，这只是改变颜色。我不能以任何方式删除内容然后应用之前的内容吗？
类似codepen.io/Jintos/pen/rolim 或ahrengot.com/tutorials/switching-text-with-css 我的codepen 是这个codepen.io/LisaFort/pen/wGeJwK