Как я могу показать DIV при наведении курсора на DIV с использованием чистого CSS?
это моя скрипка с html и css: http://jsfiddle.net/v2r5we0r/
Я пытаюсь показать DIV «station_info» (форму квадрата), когда либо щелкнул / повисел над этими «ящиками» DIV рядом с ним (в нем будет информация из моей таблицы базы данных, которую я добавлю позже).
Я разместил свой 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>
Решение
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 -->Другие решения
Других решений пока нет …
detector