Скрытая (появляющаяся) ссылка

@hehe-montana · Регистрация: 02.12.2013

Студворк — интернет-сервис помощи студентам

День добрый, уделите минутку пожалуйста.

Сделал скрытую ссылку таким образом:

HTML5
1
<a id="link" href="URL">Ссылка</a>

CSS
1
2
3
#link {text-decoration: none; position: relative; font-weight: bold; left: 63; top: 207; font-style: italic; font-size: 13; font-family: Verdana, sans-serif; color: black; visibility: hidden;}
 
#id1:hover + #link {visibility: visible;}

Ссылка получилась скрытой, но ховер на неё не срабатывает.

Добавлено через 6 минут
Наверное забыл добавить, что #id1 это DIV.

Vovan-VE · 02.12.2013, 16:28

Сообщение от huli-montana

Наверное забыл добавить, что #id1 это DIV.

Вы его в коде лучше опишите, где он есть, и как они связаны.

@sashok89 · 02.12.2013, 20:28

полный код html пожалуйста в студию!!! а то немного не понятно

@hehe-montana · 02.12.2013, 21:03 **[ТС]**

HTML:

HTML5
1
<div id="id1"><a id="link" href="URL">Ссылка</a></div>

CSS:

CSS
1
2
3
4
#link {text-decoration: none; position: relative; font-weight: bold; left: 63; top: 207; font-style: italic; font-size: 13; font-family: Verdana, sans-serif; color: black; visibility: hidden;}
#id1 {vertical-align: top; margin-top: 20; margin-left: 20; width: 180; height: 225; background-color: 545F71; background-image: url(image/image.jpg); background-repeat: no-repeat; display: inline-block;}
 
#id1:hover + #link {visibility: visible;}

@sashok89 · 02.12.2013, 22:15

Все не работает из-за того что вы не дописываете px там где нужною
попробуй вот так вот:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#link {
    text-decoration: none; 
    position: relative; 
    font-weight: bold; 
    left: 63px; /*px*/ 
    top: 207px; /*px*/
    font-style: italic; 
    font-size: 13px; /*px*/ 
    font-family: Verdana, sans-serif; 
    color: black; 
    visibility: hidden;
}
#id1 {
    vertical-align: top; 
    margin-top: 20px; /*px*/ 
    margin-left: 20px; /*px*/ 
    width: 180px; /*px*/ 
    height: 225px; /*px*/ 
    background-color: [B]#[/B]545F71; /*не забывай перед цветом ставить #*/
    background-image: url(image/image.jpg); 
    background-repeat: no-repeat; 
    display: inline-block;
}
 
#id1:hover + #link {
    visibility: visible;
}

@hehe-montana · 03.12.2013, 14:48 **[ТС]**

При чем тут "px" и не срабатывание hover? У меня весь сайт написан без "px" и все работает. И перед цветом ставить ничего не нужно.
При помощи hover + у меня на сайте изменяются картинки "других" DIV, а вот с ссылкой hover + не срабатывает как событие.

Добавлено через 8 минут
Т.е. не действует на ссылку, мб так и должно быть?

Добавлено через 15 часов 45 минут

JavaScript
1
2
3
4
5
6
7
function linkon() {
document.getElementById('link').style.display = "block";
}
 
function linkoff() {
document.getElementById('link').style.display = "none";
}

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@sashok89 75 / 75 / 11 Регистрация: 04.08.2012 Сообщений: 526 Записей в блоге: 2
	02.12.2013, 20:28
	полный код html пожалуйста в студию!!! а то немного не понятно 0