Activate dropdown then remove/destroy hover (bootstrap)

Question

Something a bit different here. Don't know how to go about it.

If the size has not been selected, the button will hover "NEED SIZE". If user clicks it will open dropdown which in bootstrap is class open. Once user has selected size, destory/remove the hover.

Any idea how this is achieved?

CSS Hover:

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

Button:

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

HTML form:

<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);
});

score 1 · Answer 1 · answered May 28 '14 at 16:27

1

You can have two different spans in your button. One for displaying message "Add to cart" and second for "Choose size". You can hide and show them respectively. I've created fiddle. It's without bootstrap but I hope it will help. The only difference is, that I used simple <select>.

http://jsfiddle.net/SWHzX/

answered May 28 '14 at 16:27

Piotr Karasiński

339
1
2
10

This is also very useful, but to open the select list or in this case open the dropdown when the user is on hover "choose size" and clicks it? – Panoply May 28 '14 at 17:01
This is actually another problem "expanding select box programatically". You can check it [here](http://stackoverflow.com/questions/249192/how-can-you-programmatically-tell-an-html-select-to-drop-down-for-example-due). I left comment in the fiddle because you used some expandable list and probably there is special method to open it (maybe as you mentioned u need to only add class _open_ to your list). – Piotr Karasiński May 28 '14 at 18:08

score 0 · Answer 2 · answered May 28 '14 at 16:27

You can remove the CSS and try the jQuery way:

//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;
});

Additionally, I've kept a fixed width for your button since the size of the button changes according to the text inside it.

DEMO

Thanks for this. But to initiate the dropdown open is what is killing me. When user presses button on hover "need size" the dropdown opens? any idea? — Panoply, May 28 '14 at 16:38

Activate dropdown then remove/destroy hover (bootstrap)

2 Answers2