Блог

Я ищу решение для разделения при наведении одной графической кнопки на две. На обеих кнопках будет ссылка на веб-сайт. Мне нужно сделать это с помощью HTML, JS или PHP.

Как этим можно управлять?

Обновление для уточнения

1. На моей индексной странице есть большая графическая кнопка с надписью «Enter».
2. При нажатии на кнопку кнопка «enter» исчезает
3. Две новые кнопки отображаются именно в этом положении.
4. На первом написано «Английская версия», а на другом «Испанская версия»
5. Когда мышь покидает область, отображается исходная кнопка back up, а две языковые кнопки исчезают

Вы можете сделать это с помощью javascript с jquery и jqueryui.Кнопка

Пример с веб-сайта jqueryui:

http://jqueryui.com/demos/button/#splitbutton

 <script>
    $(function() {
        $( "#rerun" )
            .button()
            .click(function() {
                alert( "Running the last action" );
            })
            .next()
                .button( {
                    text: false,
                    icons: {
                        primary: "ui-icon-triangle-1-s"
                    }
                })
                .click(function() {
                    alert( "Could display a menu to select an action" );
                })
                .parent()
                    .buttonset();
    });
</script>

<div class="demo">

<div>
    <button id="rerun">Run last action</button>
    <button id="select">Select an action</button>
</div>

</div><!-- End demo -->
  

Это не должно быть сложным. Вместо того, чтобы возиться с кучей манипуляций с кнопками, просто используйте фоновое изображение div для вашей кнопки «enter» на переднем слое, затем поместите под ним два связанных изображения. При наведении курсора мыши на div передний слой скрывается, открывая две кнопки под ним. Подробнее:

1. Создайте <div id="wrapper"> элемент с явно определенными высотой и шириной и position:relative . Это будет div, который содержит вашу большую кнопку отправки, а также две ваши кнопки «разделить».

2. Создайте <div id="enter"> внутри оболочки с той же шириной и высотой. Установите css background-image таким, какой вы хотите, чтобы он отображался. Кроме того, задайте эти свойства css: position:absolute; top:0, left:0; z-index:5;

3. Создайте также два img элемента внутри оболочки. Оба они не должны иметь полей / отступов / границ, той же высоты, что и div-оболочка, и половины ширины. Затем свяжите их оба с любой страницей, которую вы хотите.

Таким образом, html будет выглядеть примерно так:

 <div id="wrapper">
    <div id="enter"></div> <!-- in front of the imgs. fades out when mouseover #wrapper -->
    <a href="#"><img src="#" /></a> <!-- which reveals these two images -->
    <A href="#"><img src="#" /></a>
</div>
  

Я предлагаю вам использовать jQuery вместо ванильного javascript (это сделает вашу жизнь намного проще). Это позволит скрыть div «enter» всякий раз, когда вы наводите на него курсор, открывая два элемента img, на которые затем можно нажать:

 $('#wrapper').hover(function(){
    $('#enter').fadeOut();
}, function(){
    $('#enter').fadeIn();
}
  

Надеюсь, это поможет.