Форум Сайтостроение Веб-строительство

Сымитировать положение курсора над кнопкой

12
grey109
На сайте с 15.06.2005
Offline
160
grey109
781

Здравствуйте!

В большинстве браузеров при наведении курсора на кнопку, кнопка меняет свой внешний вид (например, в firefox, она подсвечивается голубым цветом).

Подскажите, как можно сымитировать это действие средствами css, чтобы кнопка приняла вид, как будто над ней курсор?

Спасибо!

BS
На сайте с 03.09.2013
Offline
28
Brus-search
#1

Вам нужно сымитировать наведение курсора, или отобразить свой стиль при наведении курсора? Если второе - то используйте псевдокласс :hover

grey109
На сайте с 15.06.2005
Offline
160
grey109
#2

Мне нужно первое, т.е. чтобы во всех браузерах кнопка меняла свой вид как это было задумано разработчиками браузера (в мозилле - голубая подсветка, в хроме - менялся цвет рамки у кнопки и т.д.). Пока нашел только такое решение:

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=9);

-moz-opacity: 0.9;

-khtml-opacity: 0.9;

opacity: 0.9;

но оно работает криво.

A
На сайте с 23.11.2016
Offline
7
anzarsh
#3

$('').trigger('mouseover'); - вот так не подходит?

totamon
На сайте с 12.05.2007
Offline
437
totamon
#4
grey109:
т.е. чтобы во всех браузерах кнопка меняла свой вид как это было задумано разработчиками браузера

ну не вешайте на кнопку никаких стилей и она будет отображаться в стиле по умолчанию для браузера, зачем эмулировать то?

Домены и хостинг https://8fn.ru/regru | Дедик от 3000р https://8fn.ru/73 | VPS в Москве https://8fn.ru/72 | Лучшие ВПС, ТП огонь, все страны! https://8fn.ru/inferno | ХОСТИНГ №1 РОССИИ https://8fn.ru/beget
SeVlad
На сайте с 03.11.2008
Offline
1609
SeVlad
#5
grey109:
чтобы во всех браузерах кнопка меняла свой вид как это было задумано разработчиками браузера (в мозилле - голубая подсветка, в хроме - менялся цвет рамки у кнопки и т.д.)

Это

grey109:
Сымитировать положение курсора над кнопкой

???!

[запикано]

Делаю хорошие сайты хорошим людям. Предпочтение коммерческим направлениям. Связь со мной через http://wp.me/P3YHjQ-3.
grey109
На сайте с 15.06.2005
Offline
160
grey109
#6
anzarsh:
$('').trigger('mouseover'); - вот так не подходит?

На сайте не используется jquery. Можно как-то переписать этот код на чистом javascript?

---------- Добавлено 30.11.2016 в 11:41 ----------

totamon:
ну не вешайте на кнопку никаких стилей и она будет отображаться в стиле по умолчанию для браузера, зачем эмулировать то?

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

Playwright, Selenium, etc.. Вопрос Мартин Сплитт: Googlebot не Google +1 рекомендации через
totamon
На сайте с 12.05.2007
Offline
437
totamon
#7
grey109:
Кнопка находится под другим элементом дизайна и не реагирует на положение курсора над ней.

проблемы создаются ради их решения? поместите кнопку над другим элементом дизайна☝

Ragnarok
На сайте с 25.06.2010
Offline
226
Ragnarok
#8
grey109:
Я и так ничего на кнопку не вешаю. Кнопка находится под другим элементом дизайна и не реагирует на положение курсора над ней. Когда курсор проходит над элементом, нужно изменить внешний вид кнопки, чтобы создалось впечатление что курсор над кнопкой.

так а толку, если по ней всё равно нельзя будет кликнуть?

grey109, напишите _полностью_ что есть и что нужно

//TODO: перестать откладывать на потом
grey109
На сайте с 15.06.2005
Offline
160
grey109
#9

И так, я пытаюсь сделать кросс-браузерную форму отправки файл на чистом html+css, чтобы она во всех браузера выглядела одинакова.

<style>
.input-file {
overflow: hidden;
position: relative;
display: inline-block;
}

.input {
position: absolute;
top: 0;
right: 0;
font-size: 199px;
opacity: 0;
filter: alpha(opacity:0);
}

.filename-text {
line-height: 24px;
float: left;
width: 300px;
}

.input-button-browse {
height: 24px;
width: 70px;
padding: 0 0 0 0px;
margin: 0 0 0 0;
}

.button {
height: 24px;
padding: 0 3px;
margin: 0 2px 0 0;
}

.input-file:hover .input-button-browse {
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90);
-moz-opacity: 0.9;
-khtml-opacity: 0.9;
opacity: 0.9;
}
</style>

<div class="input-file">
<input id="filename-value" class="filename-text button" type="text">
<input class="input" name="file" id="file" type="file">
<input class="input-button-browse" value="browse..." type="button">
</div>
<div><input value="test" type="button"></div>

Необходимо, чтобы при на ведении курсора на кнопку "browse…" она меняла оформление, так же как это делает обычная кнопка "test".

A
На сайте с 23.11.2016
Offline
7
anzarsh
#10

скорее всего Вам нужно вынести browse... за пределы div-а и воткнуть в него вот это onclick="document.getElementById('file').click();"

P.S. Трюк выполнен профессионалом, просьба не повторять...

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий