Question

我有多个显示图像的div，当有人悬停其中一个图像时，会出现与该图像对应的div。我有一半工作，但只有最合适的项目有效，其余的都没有。

CSS：

if ($contactc =="Yes"){

$result = mysql_query("SELECT * FROM company_details where comid = '$selectsector'");

while ($row = mysql_fetch_array($result)){
echo $row["fname"]." ".$row["comname"]."<br/>";
}


}

HTML：

.csshover {
    display: none;
    float: left;
    width: 100%;
}

#cssimage {
    float: left;
    width: 20%;
}

#cssimage:hover + .csshover {
    display: block;
}

.htmlhover {
    display: none;
    float: left;
    width: 100%;
}

#htmlimage {
    float: left;
    width: 20%;
}

#htmlimage:hover + .htmlhover {
    display: block;
}

Answer 1

那是因为您正在使用+，这是直接的兄弟选择器。由于.csshover不是#cssimage的直接兄弟，#cssimage:hover + .csshover将不会返回您要选择的元素。请使用~，即通用兄弟选择器，即：{ {1}}：

#cssimage:hover ~ .csshover

.csshover {
  display: none;
  float: left;
  width: 100%;
}
#cssimage {
  float: left;
  width: 20%;
}
#cssimage:hover ~ .csshover {
  display: block;
}
.htmlhover {
  display: none;
  float: left;
  width: 100%;
}
#htmlimage {
  float: left;
  width: 20%;
}
#htmlimage:hover ~ .htmlhover {
  display: block;
}

Answer 2

Html

<div class="wrapper">
    <div class="toggle-it">Some content</div>
</div>

样式

div.toggle-it{
   display : none;
}

.wrapper{
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.wrapper:hover.wrapper div.toggle-it{
   display : block;
}

这只是一个例子。您可以简单地将代码包装到此模式中。希望它会有所帮助。

Answer 3

~ CSS选择器仅选择与其正在修改的目标直接相邻的元素。您想要使用的是.csshover { display: none; float: left; width: 100%; } #cssimage { float: left; width: 20%; } #cssimage:hover ~ .csshover { display: block; } .htmlhover { display: none; float: left; width: 100%; } #htmlimage { float: left; width: 20%; } #htmlimage:hover ~ .htmlhover { display: block; } CSS选择器，它将选择之后出现的所有元素。

有关详细信息，请参阅this CSS selector reference。

现场演示：

＆＃13;

<div id="cssimage">
     <img src="files/images/css3.jpg"/>
</div>


<div id="htmlimage">
     <img src="files/images/html5.jpg"/>
</div>

<div class="htmlhover">html Test message</div>
<div class="csshover">CSS 3 Test message</div>

＆＃13;

addPolylines

＆＃13;

JSFiddle版本：https://jsfiddle.net/jtaa41da/

Answer 4

我不知道你是否想打电话给这个＆＃34;答案＆＃34;，但经过5分钟的纯粹尝试后，我在JSFiddle中有了这个代码：

＆＃13;

#output {
    position: fixed;
    top: 100px;
    left: 0px;
    width: auto;
    height: auto;
}

#cssimage {
    float: left;
    width: 20%;
}

#cssimage:hover + #output:before {
    content: "CSS Hover"
}

#htmlimage {
    float: left;
    width: 20%;
}

#htmlimage:hover + #output:before {
    content: "HTML Hover"
}

＆＃13;

<img id="htmlimage" src="files/images/html5.jpg"/>
<div id="output"></div>
<img id="cssimage" src="files/images/css3.jpg"/>
<div id="output"></div>

＆＃13;

这是一个非常奇怪的逻辑...... 但它有效！：D

如何让div在hss中出现并消失？

4 个答案: