说明

Question

我正在尝试将：hover用于在wordpress开发的网站上连续出现的四个不同的div。

如果我将鼠标悬停在第一个div上，它将显示子DIV，但由于某些原因，它可以通过它看到其他三个，但是如果我将最后一个div悬停了，它们都将消失。我尝试使用可见性：隐藏；那是行不通的。

然后我有一个对应的CSS代码，用于#reviewhover 2、3和4。

我有没有办法使用Javascript来做到这一点？

 .reviewwrapper
    {
	color: white;
	width: 20%;
    height: 200px;
    float: left;
	background-color: #209dad;
    }

    .reviewwrapper:hover  #reviewhover1 {
    display: block;
    }


    .reviewwrapper #reviewhover1 {
    display: none;
    position: absolute;
    background-color: #209dad;
    top: 50%;
    left: 50%;
    width:70em;
    height:20em;
    margin-top: -10em; /*set to a negative number 1/2 of your height*/
    margin-left: -35em; /*set to a negative number 1/2 of your width*/
    }

 <div class="reviewwrapper">
    text
    <div id="reviewhover1">
    text
    </div>
    </div>
    <div class="reviewwrapper">
    text
    <div id="reviewhover2">
    text
    </div>
    </div>
    <div class="reviewwrapper">
    text
    <div id="reviewhover3">
    text
    </div>
    </div>
    <div class="reviewwrapper">
    text
    <div id="reviewhover4">
    text
    </div>
    </div>

Answer 1

您可以拥有reviewWrapper1，reviewWrapper2 ...，然后可以添加悬停。

Answer 2

您可以使用以下选择器：

.reviewwrapper:hover [id^="reviewhover"] {
  display: block;
}

.reviewwrapper [id^="reviewhover"] {
   ...
}

说明

您可以使用属性来选择CSS元素，格式如下：

[attribute="value"]

您还可以在=之前使用特定的选择器，以指定属性的值应以提供的值开始，包含还是结束。在这种情况下，我们使用^来指定它应该以开头的以下值。 Documentation

[attribute^="value"]

通过这种方式，我们可以将样式应用于以id开头的reviewhover的所有元素，从而匹配所有请求的元素（reviewhover1，{{1} }，reviewhover2）。

警告，它还会匹配任何过度的变化，例如reviewhover3，因此您必须注意不要发生冲突。

演示

我为reviewhover-somethingelse元素添加了一些背景色，以便清楚地显示正在显示的颜色。

reviewhover

.reviewwrapper {
  color: white;
  width: 20%;
  height: 200px;
  float: left;
  background-color: #209dad;
}

.reviewwrapper:hover [id^="reviewhover"] {
  display: block;
}

.reviewwrapper [id^="reviewhover"] {
  display: none;
  position: absolute;
  background-color: #209dad;
  top: 50%;
  left: 50%;
  width: 70em;
  height: 20em;
  margin-top: -10em;
  /*set to a negative number 1/2 of your height*/
  margin-left: -35em;
  /*set to a negative number 1/2 of your width*/
}

.reviewwrapper:hover #reviewhover1 {
  display: block;
}

.reviewwrapper #reviewhover1 {
  display: none;
}

Answer 3

问题是我如何垂直对齐文本。

我正在使用

#reviewtext {
text-align: center;
position: relative;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}

我将其更改为

#reviewtext {
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
/* more style: */
height: 14em;
}

如何使用悬停隐藏许多div？

3 个答案:

说明

演示