Мои HTML-кнопки не позволяют мне нажимать на них, но горячие клавиши работают

0

Привет, поэтому я работал над этим проектом, чтобы отслеживать определенные таймеры. После нажатия кнопки часы гаснут до нуля. Однако после добавления в фоновый кадр и изображение мои кнопки перестали работать. Я реализовал сочетания клавиш, которые запускают таймер, поэтому мои функции javascript в порядке. Я думаю, что ошибка находится где-то в моем html-коде.

<body align="center">
<div id="header">
<h1>Welcome to LoL Buff Timers!</h1>
<h3>Like us on FB</h3>
</div>

Вот где я вставляю фрейм-фрейм, который я объявил в своем CSS. Середина - это белое изображение, которое перемещается по фону, а элементы кнопки HTML - в непрозрачность. Я объявляю, что у меня есть z-индекс -1 в моем CSS.

<div id="frame">
    <img id="middle" src="white.jpg">
     <table align="center">
        <th colspan="2">
             <div id = "CustomHeader">
             <img src = "shyvana.png">
             <h1>Salazar44</h1>
             <br>
             <h3>Jungle</h3>
             <h5>Shyvana</h5>
     </div>
        </th>
     <tr>
         <td>
            <div id="container">
             <div id = "buffs">
                 <label class="title">Blue Buff:</label>
                 <br>
                 <button class="buffbutton" type="button" id="yosb" onclick="startBlue();">Start Blue</button>
                 <label class="bluetime" id="mins">05:</label>
                 <label class="bluetime" id="sec">00</label>
                 </td>
                 <td>
                 <label class="title">Red Buff:</label>
                 <br>
                 <button class="buffbutton" type="button" id="yosr" onclick="startRed();">Start Red</button>
                 <label class="redtime" id="mins1">05:</label>
                 <label class="redtime" id="sec1">00</label>
             </div>
         </td>
     </tr>
         <tr>
         <td>
             <div id="globalobj">
                 <label class="title">Dragon:</label>
                 <br>
                 <button class="buffbutton" type="button" id="drag" onclick="startDrag();">Start Drag</button>
                 <label class="dragtime" id="mins2">06:</label>
                 <label class="dragtime" id="sec2">00</label>
             </td>
             <td>
                 <label class="title">Baron:</label>
                 <br>
                 <button class="buffbutton" type="button" id="worm" onclick="startWorm();">Start Baron</button>
                 <label class="wurmtime" id="mins3">07:</label>
                 <label class="wurmtime" id="sec3">00</label>
             </div>
         </div>
         </td>
     </tr>
     </table>
 </div>
 </body>
  • 0
    Нет способа узнать, что не работает без кода. Не могли бы вы создать быстрый jsfiddle?
  • 0
    Да! Пожалуйста, дайте мне минутку.
Показать ещё 3 комментария
Теги:
button

1 ответ

1
Лучший ответ

изменение

#frame{
    position: absolute;
}

http://jsfiddle.net/Cyf4Z/1/show/

Кнопки теперь доступны для кликов, но некоторые ошибки в скрипте /jsfiddle, попробуйте изменить код.

Поделиться
  • 0
    Хорошо, это работает, спасибо за помощь мне! Есть ли у вас какие-либо идеи, почему эти элементы CSS будут вызывать такие кнопки? Это из-за изображения?
  • 0
    нет, это из-за позиции
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню