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

Question

好的，所以我有一个元素列表，一旦我将鼠标悬停在其中一个上，我希望 "text box div" 的内容相应地改变。我在网上看了一遍又一遍，none 的结果对我有帮助

  <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

只有 CSS 你无法做到这一点。只有在 <ul> 内移动“.centrermenu”div。但是使用 javascript 或 Jquery 确实很容易做到，例如

Answer 2

如前所述，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;
}

Answer 3

这个解决方案怎么样。你最好的选择是 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;
    }

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

Hover over one list element, affect a div Only CSS

html

css

hover

html-lists