小编use*_*478的帖子

我最近有一个想法,:hover当鼠标悬停在链接上时,使用CSS伪类来显示样式化的工具提示.

链接的基本代码如下所示:

.hasTooltip {
    position:relative;
}
.hasTooltip span {
    display:none;
}

.hasTooltip:hover span {
    display:block;
    background-color:black;
    border-radius:5px;
    color:white;
    box-shadow:1px 1px 3px gray;
    position:absolute;
    padding:5px;
    top:1.3em;
    left:0px;   
    max-width:200px; /* I don't want the width to be too large... */
}

<a href="#" class="hasTooltip">This link has a tooltip!<span>This is the tooltip text!</span></a> 

结果正是我想要的,但有一个恼人的问题:跨度不扩展以容纳文本,如果我没有指定宽度,文本被压扁.

我在Google上做了一些搜索,发现了一些人们做过的工作的例子(这个例子与我得到的相似),但似乎没有人span解决我所遇到的宽度问题.

我想从这个字符串创建一个数组,存储在数据库中:

$string = '"2148" => "50","2050" => "2","2403" => "1"';
$id_values = explode('=> "', $string);
foreach($id_values as $id => $value)
{
    $value_to_print .= '<img src="images/item_values/'.$id.'.gif"> - '.$value.'';
}

echo $value_to_print;

手动定义数组按预期工作:

$id_values = array("2148" => "50","2050" => "2","2403" => "1");