如何在使用纯CSS悬停在DIV上时显示DIV？

-1

这是我捣鼓HTML和CSS：http://jsfiddle.net/v2r5we0r/如何在使用纯CSS悬停在DIV上时显示DIV？

我试图表现出DIV“station_info”（正方形的形状）当任一点击/徘徊在这些div“盒子”就在旁边（它将从我的数据库表中获得我将在稍后提供的信息）。

我有我的PHP发布，因为我通过我的数据库循环创建这些框。

是否有可能只使用CSS和HTML？如果是这样，我该怎么办？我只找到JQuery的例子，我不想使用JQuery或Javascript。

向下滚动在小提琴的结果看smalss箱

预先感谢您。

HTML：

<body> 
<div id="map_size" align="center"> 


<div class='desk_box' style='position:absolute;left:20px;top:1230px;'>id:84 
<div class='station_info'>Hello</div></div> 
</div> <!-- end div map_Size --> 
</body>

CSS：

/*body*/ 
body{ 
margin:0px auto; 
width:80%; 
height:80%; 
} 

/*map size*/ 
#map_size{ 
width:1190px; 
height:1300px; 
background:#0099FF; 
border-style: solid; 
border-color: black; 
position: relative; 
} 

/* desk boxes*/ 
.desk_box{ 
width: 23px; 
height: 10px; 
border: 4px solid black; 
padding:10px; 
} 
.desk_box > .station_info{ 
display:none; 
} 
.desk_box > .station_info:first-child{ 
display:block; 
} 
.desk_box > div:hover + div { 
display: block; 
}

PHP：

<?php 
include 'db_conn.php'; 

//query to get X,Y coordinates from DB 
$coord_sql = "SELECT coordinate_id, x_coord, y_coord FROM coordinates"; 
$coord_result = mysqli_query($conn,$coord_sql); 

//see if query is good 
if($coord_result === false) { 
    die(mysqli_error()); 
} 
?> 
<div id="map_size" align="center"> 

       <?php 
      //get number of rows for X,Y coords in the table 
       while($row = mysqli_fetch_assoc($coord_result)){  
         //naming X,Y values 
         $x_id = $row['coordinate_id']; 
         $x_pos = $row['x_coord']; 
         $y_pos = $row['y_coord']; 

        //draw a box with a DIV at its X,Y coord  
       echo "<div class='desk_box' style='position:absolute;left:".$x_pos."px;top:".$y_pos."px;'>id:".$x_id."<div class='station_info'>Hello</div></div>"; 
       } //end while coord_result loop 
       ?> 
    </div>

来源

2014-10-07 mario

我们需要输出HTML和CSS可能其 – 2014-10-07 17:09:22

在我的jsfiddle ... – mario 2014-10-07 17:10:24

不幸的是，如果拨弄走了你的代码不会对别人有用。一个*最小**数量的HTML将在你的问题中有用。 – 2014-10-07 17:14:10

CSS才能发挥作用下降或去复进一步在DOM树中的同一级别，所以你必须把你想隐藏/显示的div放在所有你要悬停的DIV后面。然后你可以使用一般的兄弟操作符：~，它查找给定元素之后的元素。

说你有

.toto ~ .titi {}

那么这些<div class="titi">将匹配

<div class="toto"><div> 
<div class="titi"></div>

或者

<div class="toto"></div> 
<div class="whatever"></div> 
<div class="titi"></div>

但是这一次不会

<div class="titi"></div> 
<div class="toto"></div>

下面是一个片段，看看这是你想要的。

/*body*/ 
 
body{ 
 
\t margin:0px auto; 
 
\t width:80%; 
 
\t height:80%; 
 
} 
 

 
/*map size*/ 
 
#map_size{ 
 
\t width:1190px; 
 
\t height:1300px; 
 
\t background:#0099FF; 
 
\t border-style: solid; 
 
\t border-color: black; 
 
\t position: relative; 
 
\t } 
 

 
/* desk boxes*/ 
 
.desk_box{ 
 
\t width: 23px; 
 
\t height: 10px; 
 
\t border: 4px solid black; 
 
\t padding:10px; 
 
\t } \t 
 
.desk_box > .station_info{ 
 
\t display:none; 
 
} 
 
.desk_box > .station_info:first-child{ 
 
\t display:block; 
 
} 
 
.desk_box > div:hover + div { 
 
    display: block 
 
} 
 

 
.div-to-show { 
 
    display: none; 
 
} 
 
.desk_box:hover ~ .div-to-show { 
 
    display: block; 
 
}

<div id="map_size" align="center"> 
 
    <div class='desk_box' style='position:absolute;left:20px;top:1230px;'>id:84<div class='station_info'>Hello</div></div> 
 
    <div class='desk_box' style='position:absolute;left:20px;top:1165px;'>id:85<div class='station_info'>Hello</div></div> 
 
    <div class='desk_box' style='position:absolute;left:20px;top:1100px;'>id:86<div class='station_info'>Hello</div></div> 
 
    <div class='desk_box' style='position:absolute;left:20px;top:1035px;'>id:87<div class='station_info'>Hello</div></div> 
 
    <div class='desk_box' style='position:absolute;left:73px;top:1230px;'>id:92<div class='station_info'>Hello</div></div> 
 
    
 
    <div class="div-to-show" style="position: absolute; left:150px; bottom: 100px;">Oh hi !</div> 
 
</div> <!-- end div map_Size -->

来源

2014-10-07 17:26:33

这正是我想要的，但现在我遇到了问题，因为我需要为每个“desk_box”DIV创建它，当我将鼠标悬停在一个上面时，它将显示它们全部而不是单独显示。 – mario 2014-10-07 18:58:25

然后，您可以使用直接兄弟操作符：'+'，但是您必须将2个组合的目标元素放置在一起，以便目标元素直接位于元素的后面。我不确定我是否清楚。 – 2014-10-07 21:20:51

如何在使用纯CSS悬停在DIV上时显示DIV？

回答

相关问题