Question

所以我正在开发一个移动微型网站，并说，我希望页面上的链接能够表现出来像ios链接/标签一样，当你点击它们时，按钮的整个宽度都是活动的并且改变颜色以显示点击/手指状态等等。该div的整个宽度表现得像一个按钮，所以在小型手机或平板电脑上，只要我没有指定宽度，其活动状态从左到右全部以“块”方式

为此，例如，如果我有常规文本链接。像这样：

<div class="mainBtns"><a href="gallery.php">Portfolio</a></div>

id给它这个CSS，以便在鼠标悬停/点击时使用finget等，它的行为类似于ios按钮/标签。

CSS:

        .mainBtns a{
            display:block;

        }

    .mainBtns a:hover{
        background-color:#d8d3cb;   

    }

现在说。这是我试图解决的问题。

我有一个名为 thumbItemW 的父级Div（内容包装器）; 和两个名为 galThumb 和 galThumbtxt

的子项

内容块如下所示：

<div class="thumbItemW ">
    <div class="galThumb">
        <a href="gallery-highrise.php" alt=""><img src="images/thumbs/highrise.jpeg" alt="High rise Gallery" />
        </a>
    </div> **//this is the gallery thumb floated left**

<div class="galThumbTxt"> 
    <a href="gallery-highrise.php" alt="">HIGH RISE CONTEMPORARY</a>
</div>**//this is the gallery thumb text floated right**
    <div class="clearEm"> </div>//clear the float
</div> <!-- thumbItemW ender -->

我想要做的是，当用户手指点击父div时，背景颜色会改变，如上例中的"mainBtns / mainBtns a:hover"

问题在于，与mainBtns的第一个例子不同，因为这个例子有子项，如果我这样做：

pseudo CSS:

.thumbItemW  a:hover{
    display:block;  
}

或类似的东西，这不会像id想要的那样工作，因为元素是浮动在这个父div中。

我想要做的是让父div .thumbItemW 像显示块一样，这样当用户点击时，他们可以沿着该divs宽度单击ANYwhere并仍然激活按钮反对单击按钮或文本的右上方。

这可以通过我的方式实现吗？这可以用CSS单独实现而不用javascript / jquery吗？

希望它不会太混乱。

Answer 1

为什么不指定元素的宽度和高度？

CSS显示块和浮动元素（css掌握）可以这样做吗？

1 个答案: