Question

我试图在jquery mobile中将我的图像作为占位符，但我失败了，这是我的link看看我想要什么，这是我的代码，使“Expedia的图标”作为占位符。因此，当某人从移动设备触摸此图标或从桌面浏览器中点击此图标时，蓝色方块会覆盖此图标并使其突出显示。

<div data-role="content">

     <ul data-role="listview" data-inset="true" data-dividertheme="b">
                    <li>
                        <img alt="Hotels.com" src="images/H.jpg" />
                        <div style="margin-top: 0px; width: 53%; float: left;">
                            <a style="font-size: 10px; color: Black;">Great Deal- Collect 10 nights and get 1 free
                                at Hotels.com</a>  
                    </li>
    </ul>
</div>

Answer 1

您可以使用:active CSS选择器来执行此操作。

请参阅：http://jsfiddle.net/2N7Ja/3/

HTML：

<ul id="list">
    <li class="cf">
        <span class="wrapper">
            <img src="image.png"/>
        </span>
        <a>Great Deal- Collect 10 nights and get 1 free at Hotels.com</a> 
    </li>
</ul>

CSS：

img { display: block; }
#list { list-style: none; }
#list, #list > li {
    margin: 0;
    padding: 0;
    border: 1px solid #ccc;
}
#list > li > a {
    display: block;
    float:left;
}
.cf:after {
    content:"";
    display:table;
    clear:both;
}
#list img {
    float: left;
    padding: 2px;
}
#list > li:active img {
    border: 2px solid blue;
    padding: 0;
}

如何使图标作为占位符

1 个答案: