выпадающее меню при наведении мыши должно оставаться видимым

Question

выпадающее меню при наведении мыши должно оставаться видимым

0

Кнопка с выпадающим меню должна быть видимой, когда мышь перемещается внутри div, которая работает нормально, но проблема в том, что, когда я вывожу мышь из этого div, я хочу, чтобы кнопка и раскрывающееся меню оставались видимыми, если меню опущено, но кнопка должна быть скрыта, если меню не опустится. Как я могу это достичь? (в данном коде, кнопке и выпадающем меню спрятаться на мыши, независимо от того, что)

<div id="img_container" name="img_container" onmouseover="f()" onmouseout ="g()">
            <img src="image/images.jpg"  alt="Cover" >
            <div class="btn-group" id="cov" name="cov" >
               <button  class="btn dropdown-toggle" data-toggle="dropdown">Action
               </button>
               <ul class="dropdown-menu">
    <!-- dropdown menu links -->
                <li><a href="#">Secondary link</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Another link</a></li>
               </ul>
            </div>
        </div>


function f(){
      document.getElementById("cov").style.display="inline-block";
  }

  function g(){
      document.getElementById("cov").style.display="none";
  }

Fiddle

user3452721 29 май 2014, в 09:51

Источник

0

Так какой у тебя вопрос?
bjb568 29 май 2014, в 07:32
1

возьмите пожалуйста!
Rahul Gupta 29 май 2014, в 07:34
0

css это с наведением, и сделать внешний щелчок вариант.
a coder 29 май 2014, в 07:36
0

@Placeholder_in_use Не могли бы вы рассказать об этом подробнее?
user3452721 29 май 2014, в 07:39
0

csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu
a coder 29 май 2014, в 07:41
0

CSS :hover вернется, когда мышь выйдет из элемента, к которому она прикреплена ... Я думаю, что ОП хочет, чтобы он оставался только в определенных обстоятельствах, поэтому логика должна быть написана в ...
Kinnectus 29 май 2014, в 07:42
0

Вы пытаетесь сделать скользящее меню, основанное на времени, потому что это немного сложнее сделать. У меня ушло около 3 часов, чтобы разобраться во время изучения JavaScript.
a coder 29 май 2014, в 07:43
0

нет .. не основанный на времени флиппер .. однако есть ли какой-нибудь способ, которым мы можем узнать, выпало ли меню вниз ... тогда все это становится слишком легким
user3452721 29 май 2014, в 07:48
0

перефразируйте ваш вопрос, это немного сбивает с толку, и если вы пытаетесь достичь какой-то другой функциональности, то приведите это в качестве примера, поскольку правильный пример помогает в быстром решении
codefreaK 29 май 2014, в 08:15

Показать ещё 7 комментариев

Теги:

javascript

jquery

drop-down-menu

onmouseover

onmouseout

3 ответа

1

Вместо того, чтобы установить style для отображения none, используйте .show() и .hide() в jquery чтобы показать и скрыть конкретный div

$('#cov').hide();

function f() {
    //document.getElementById("cov").style.display = "inline-block";
    $('#cov').show();
}

function g() {
    // $('#cov').hide();
   //document.getElementById("cov").style.display = "none";
}

JSFiddle для отображения div, когда мышь

jhyap 29 май 2014, в 05:57

0

я не думаю, что проблема с использованием hide () или отображения ...
user3452721 29 май 2014, в 08:32
0

Вы просите скрыть button если меню не выпадающее. Но у вас уже есть свое меню внутри html . Это значит, что он навсегда выпадет, и вы навсегда не сможете скрыть кнопку
jhyap 29 май 2014, в 08:38

0

Попробуйте эту скрипку, надеюсь, что это то, что вы ищете.

Вам не нужно onmouseout ="g()"

Обновить

попробуйте эту обновленную скрипку

Sid M 29 май 2014, в 05:51

0

когда я мышью, я хочу, чтобы кнопка скрывалась, если меню не выпадало
user3452721 29 май 2014, в 08:30
0

обновил скрипку попробуй
Sid M 29 май 2014, в 08:43
0

в этом, во-первых, кнопка становится скрытой при щелчке меню, но я хочу, чтобы кнопка оставалась видимой при нажатии на нее, а во-вторых, она работает только один раз
user3452721 29 май 2014, в 08:51
0

попробуй эту скрипку 2
Sid M 29 май 2014, в 10:24

Показать ещё 2 комментария

Ещё вопросы

css это с наведением, и сделать внешний щелчок вариант.
@Placeholder_in_use Не могли бы вы рассказать об этом подробнее?
CSS :hover вернется, когда мышь выйдет из элемента, к которому она прикреплена ... Я думаю, что ОП хочет, чтобы он оставался только в определенных обстоятельствах, поэтому логика должна быть написана в ...
Вы пытаетесь сделать скользящее меню, основанное на времени, потому что это немного сложнее сделать. У меня ушло около 3 часов, чтобы разобраться во время изучения JavaScript.
нет .. не основанный на времени флиппер .. однако есть ли какой-нибудь способ, которым мы можем узнать, выпало ли меню вниз ... тогда все это становится слишком легким
перефразируйте ваш вопрос, это немного сбивает с толку, и если вы пытаетесь достичь какой-то другой функциональности, то приведите это в качестве примера, поскольку правильный пример помогает в быстром решении
я не думаю, что проблема с использованием hide () или отображения ...
Вы просите скрыть button если меню не выпадающее. Но у вас уже есть свое меню внутри html . Это значит, что он навсегда выпадет, и вы навсегда не сможете скрыть кнопку
когда я мышью, я хочу, чтобы кнопка скрывалась, если меню не выпадало
в этом, во-первых, кнопка становится скрытой при щелчке меню, но я хочу, чтобы кнопка оставалась видимой при нажатии на нее, а во-вторых, она работает только один раз

Ryan Brewer · Accepted Answer · 2014-05-29T09-03-00.000Z

Если я правильно понимаю вас, вы хотите что-то вроде этого:

var list = document.getElementById("dropdown-menu");
var menu = document.getElementById("cov");

function dropdown() {
    if (list.style.display == "none") {
        list.style.display = "block";
    } else {
        list.style.display = "none";
    }
}

function f() {
    menu.style.display = "block";
}

function g() {
    if (list.style.display == "none") {
        menu.style.display = "none";
    } else if (list.style.display == "block"){
        menu.style.display = "block";
    } else {menu.style.display = "block"}
}

Вот ДЕМО

Хорошее решение, это точно отвечает на вопрос!