如何在使用純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？

回答

相關問題