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

Question

好的，所以我有一个元素列表，将鼠标悬停在其中一个元素上之后，我希望“文本框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，但是它们不替换文本...我想要

Answer 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;
    }

Answer 2

只有使用CSS才能达到目标。 仅在<ul>移动“ .centrermenu” div时。 但是例如使用javascript或Jquery确实很容易

Answer 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;
}