Question

这是我用html和css：http://jsfiddle.net/v2r5we0r/

的小提琴

我试图在那些DIV＆＃34;盒子＆＃34;上点击/徘徊时试图显示DIV＆＃34; station_info＆＃34;（正方形的形状）就在它旁边（它将包含我稍后将在我的数据库表中提供的信息）。

我发布了自己的PHP，因为我正在通过我的数据库循环创建这些框。

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

向下滚动小提琴中的结果以查看小盒子

提前谢谢。

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>

Answer 1

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{
	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
}

.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 -->

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

1 个答案: