При нажатии на кнопку «Инструменты» кнопка «div» (: active) отлично работает в Firefox, но не в IE. - PullRequest
Новая
       1

При нажатии на кнопку «Инструменты» кнопка «div» (: active) отлично работает в Firefox, но не в IE.

0 голосов
/ 06 сентября 2010

Этот код отлично работает в Firefox, но не в IE, пожалуйста, дайте решение только с использованием CSS (без jquery или javascript), проблема начинается, когда вы нажимаете на span внутри DIV! 

<style type="text/css">

.tools {
    cursor:pointer;
}

.tools {
    background-color:#aaa;
    padding:5px;
}

.tools span {
    background-color:green;
    color:white;
}

.tools:hover {
    background-color:#ccc;
}

.tools:hover span {
    background-color:red;

}

.tools:active {
    background-color:#333;
    color:#fff;
}

.tools:active span {
    background-color:blue;
}


</style>

</head>

<body  onselectstart="return false;" >
<div class="tools" style="width:100px; height:20px;">
<span>
Hello world...
</span>
</div>
</body>

Ответы [ 2 ]

7 голосов
/ 14 февраля 2013

Это будет работать, если вы используете тег <label> вместо <a>, или если вы поместите один внутри другого.

3 голосов
/ 06 сентября 2010

Вы не должны делать div или любой другой элемент html, чтобы вести себя как другой элемент.Нет причины, по которой вы не должны использовать вместо этого элемент «a».Вам просто нужно указать (в css) «display: block», чтобы вы могли создать его так же, как и для div. 

<style type="text/css">

.tools {
    background-color:#aaa;
    padding:5px;
    display:block;
}

.tools span {
    background-color:green;
    color:white;
}

.tools:hover {
    background-color:#ccc;
}

.tools:hover span {
    background-color:red;

}

.tools:active {
    background-color:#333;
    color:#fff;
}

.tools:active span {
    background-color:blue;
}


</style>

</head>

<body  onselectstart="return false;" >
<a class="tools" style="width:100px; height:20px;">
<span>
Hello world...
</span>
</a>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...