Как я могу показать DIV при наведении курсора на DIV с использованием чистого CSS?

Question

Как я могу показать 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>

-1

css css3 html html5 php

Решение

По вопросам рекламы [email protected]

Accepted Answer

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 -->

0

Другие решения

Других решений пока нет …

Источник