Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   возможно ли отменить наведение браузера на id по внутренней ссылке? (https://javascript.ru/forum/xhtml-html-css/78123-vozmozhno-li-otmenit-navedenie-brauzera-na-id-po-vnutrennejj-ssylke.html)

AleksSergSB 30.07.2019 12:23

возможно ли отменить наведение браузера на id по внутренней ссылке?
 
Добрый!
Есть внутренняя ссылка ведущая на id и :target в css. Возможно ли перейти по ссылки(:terget отрабатывал) но не перемещаться браузеру на этот id?
Возможно ли блокировка наведения на внутреннюю ссылку?

Malleys 30.07.2019 14:31

Вот, например...
<section id="home">
	<h1>Hello world!</h1>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illo odio assumenda error magnam ratione, reiciendis temporibus rerum repudiandae sed, possimus beatae! Rem, fuga! Quae perferendis nam cumque, eaque architecto quam!</p>
	<a href="#articles">Articles</a> • <a href="#about">About</a>
</section>

<section id="articles">
	<h1>Articles</h1>
	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Asperiores tempore maxime porro? Earum atque quo est exercitationem fuga quae in saepe. Molestias qui nisi dolorem, accusantium soluta quod temporibus explicabo!</p>
	<a href="#home">Home</a> • <a href="#about">About</a>
</section>

<section id="about">
	<h1>About</h1>
	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste adipisci optio consequuntur recusandae doloribus maiores sapiente, necessitatibus ducimus veniam modi voluptatem nihil atque tempore molestiae a natus sunt quos ab!</p>
	<a href="#home">Home</a> • <a href="#articles">Articles</a>
</section>

<style>

html, body, section {
	height: 100%;
	width: 100%;
	margin: 0;
	box-sizing: border-box;
	scroll-behavior: smooth;
}

section {
	padding: 5em;
	overflow: auto;
	transition: 500ms;
}

section:nth-of-type(1) {
	background-color: yellowgreen;
}

section:nth-of-type(2) {
	background-color: gold;
}

section:nth-of-type(3) {
	background-color: deeppink;
}

section:target, section:target a {
	background-color: black;
	color: white;
}

h1 {
	transition: 500ms;
}

:target h1 {
	text-shadow:
		0 0 4px white,
		0 -5px 4px #FFFF33,
		2px -10px 6px #FFDD33,
		-2px -15px 11px #FF8800,
		2px -25px 18px #FF2200;
	font-size: 400%;
}
	
</style>


Что вы имеете в виду, когда пишете, что перейти по ссылке, но не перемещаться браузеру на этот id? Ведь переход по ссылке как раз таки подразумевает переход (или перемещение), поэтому :target срабатывает, а если перехода нет, то и :target не сработает!


Часовой пояс GMT +3, время: 02:15.