2

我有一个搜索栏，旁边有一些社交媒体按钮。当我单击它时，我想使用 CSS3 Transition 属性来改变条的宽度，但我也需要按钮来移动。这是我到目前为止所拥有的

#s
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}

#s:focus {
width:110px;
}

.search input[type="text"], .widget_search input[type="text"] {
background-image: url(api/images/icons/search.png);
background-repeat: no-repeat;
background-position: 8px 50%;
padding-left: 25px;
width: 80%;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}

#searchform #searchsubmit {
clear: both;
display: block;
margin: 10px 0;
}

文本字段的宽度改变得很好，但重申一下，我想知道当我单击文本字段时是否可以更改文本字段旁边的按钮的位置。

<div id="header-widget-area" class="widget-area" role="complementary">
    <div id="pc_info_widget_designfolio-4" class="widget pc_info_widget">
        <a class="sm-icon" target="_blank" href="http://www.facebook.com/TheRedBalloonToyStore">
        <img width="32" height="32" alt="Facebook" src="http://redballoontoystore.com/w/wp-content/themes/designfolio/images/facebook.png">
        </a>
        <a class="sm-icon" target="_blank" href="http://twitter.com/RBToyStore">
        <img width="32" height="32" alt="Twitter" src="http://redballoontoystore.com/w/wp-content/themes/designfolio/images/twitter.png">
        </a>
        <div class="search">
            <form id="searchform" action="http://redballoontoystore.com/w/" method="get" role="search">
                <span>
                <input id="s" type="text" name="s" size="10" value="" placeholder="Search…">
                <input id="searchsubmit" type="submit" value="Search">
                </span>
            </form>
        </div>
    </div>
</div>
4

2 回答 2

1

因为您想要移动以响应关注的元素在 DOM 中input出现的较早，这与 CSS 选择元素的方式相反（它只能在 DOM 中选择稍后的元素），所以我可以实现的唯一方法是调整大小a元素（包含图像）的宽度为 parent 的 48 % div；并在其父a元素中居中图像。

这样，随着父元素的宽度随着焦点的变化而变化，尺寸a也会增加，并且随着图像在这些a元素中居中，它们的位置也会发生变化。不利的一面是父 div 必须调整其宽度以响应子元素的焦点，唯一可能的方法div是 display inline，inline-block（或浮动或绝对定位）。

我还稍微修改了您的转换方法，供应商前缀应该在非供应商前缀版本之前（这样“最终版本”转换会覆盖供应商前缀版本）。无论如何，调整口味，我希望这对你有用：

#header-widget-area {
    border: 1px solid #000; /* to help visualise the space/size of the element */
    display: inline-block; /* to 'collapse' the element to the size of its children */
}

#s {
    width: 80px;
    -webkit-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -moz-transition: all 1s linear;
    transition: all 1s linear;
}

#s:focus {
    width: 110px;
    -webkit-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -moz-transition: all 1s linear;
    transition: all 1s linear;
}

a {
    display: inline-block;
    width: 48%;
    text-align: center;
}​

JS 小提琴演示。

于 2012-08-14T22:40:09.877 回答
0

尝试类似#s:focus + buttonand #s:focus + button + button。请记住，+选择器元素的意思是“下一个兄弟”。

于 2012-08-14T22:08:13.233 回答