Question

这里有点不同。不知道如何去做。

如果未选择尺寸，按钮将悬停＆＃34; NEED SIZE＆＃34;。如果用户点击它将打开下拉列表，其中引导程序是类open。一旦用户选择了尺寸，就会移除/移除悬停。

知道如何实现这一目标吗？

CSS Hover：

.cart-btn:hover span {display:none}
.cart-btn:hover:before {content:"NEED SIZE"}

按钮：

<button id="cart-btn" type="button" class="btn btn-success btn-lg cart-btn">
 <span>ADD TO CART</span>
</button>

HTML表单：

<div class="btn-group cart-dd" id="cart-dd">
  <a class="btn btn-default dropdown-toggle cart-dd" data-toggle="dropdown" href="#">
  Select Size  <span class="caret"></span></a>

  <ul class="dropdown-menu cart-dd">
    <li>
      <input type="radio" class="blue" value="one" name="size" id="one">
      <label class="size-label" for="1">One</label>
    </li>
    <li>
      <input type="radio" class="red" value="one" name="size" id="two">
      <label for="two">Two</label>
    </li>
  </ul>
</div>

jQuery的：

$(".dropdown-menu li label").click(function(){
  var selected = $(this).text();
  $(this).parents('#cart-dd').find('.dropdown-toggle').html(selected);
});

Answer 1

按钮中可以有两个不同的跨度。一个用于显示消息＆＃34;添加到购物车＆＃34; ＆＃34;选择尺寸＆＃34;。您可以分别隐藏和显示它们。我创造了小提琴。它没有引导程序，但我希望它会有所帮助。唯一的区别是，我使用了简单的<select>。

http://jsfiddle.net/SWHzX/

Answer 2

您可以删除CSS并尝试jQuery方式：

//Initially the need size should be shown
var need_size=true;
//when the cursor enters the button area
$('#cart-btn').mouseenter(function(){
 //we check if the message needs to be shown
 if(need_size==true){
    //if yes, show it
    $(this).find('span').html('NEED SIZE');
  }
});
$('#cart-btn').mouseleave(function(){
    //when the cursor leaves the button, we restore back the text
    $(this).find('span').html('ADD TO CART');
});

$(".dropdown-menu li label").click(function(){
  var selected = $(this).text();
  $(this).parents('#cart-dd').find('.dropdown-toggle').html(selected);
  //we disable the need size text to be shown once an option is selected
  need_size=false;
});

此外，我为您的按钮保留了固定的宽度，因为按钮的大小会根据其中的文字而变化。

<强> DEMO

激活下拉菜单然后删除/销毁悬停（引导程序）

2 个答案: