WordPress как на ладони
wordpress jino

Как изменить подчеркивание ссылок. Анимация свойства: text-decoration: underline

Очень завораживает как подсвечиваются (расширяющейся линией из центра) ссылки у Вас хочу также!!! Как это сделать???

0
Гость 2 года назад
  • 0
    Kama4697

    Подробно объяснять не буду, там не просто, потому что ко всем ссылкам разом добавляется эффект и иногда он вообще не подходит или ломает все. Дам коды, если разберетесь, хорошо, нет то нет.

    Я это придумал и прилично напрягся, чтобы это имело хоть какую-то форму. Есть моменты, которые мне не нравятся и исправить которые видимо никак нельзя, так чтобы это было универсально. Но костыли наше все smile

    Вот JS:

    // a hover effect ----------------------
    jQuery(document).ready(function($) {
    
    	// добавим классы элементов внутри которых не нужно обрабатывать
    	var findIn      = '.wrapper',
    		skipFindIn  = '.h_add_question, [class*=nav], [class*=menu]',
    		skipIfHas   = '[class*=btn], [class*=button]',
    		skipIfHasInside = 'img, svg, p, div, :before, :after, .btn, .button',
    		isIE = function(){
    			var ua = window.navigator.userAgent;
    			var msie = ua.indexOf("MSIE ");
    			//return ua;
    			// If Internet Explorer, return version number
    			if( msie > 0 || !!navigator.userAgent.match(/Trident.*rv:11./) )
    				return true;
    			else
    				return false;
    		}();
    
    	// ничего не делаем для IE
    	if( isIE ) return;
    
    	$.fn.addAHov = function(){
    		return this.each(function(){
    			var $the = $(this),
    				disp = $the.css('display'),
    				text = $the.text();
    
    			//console.log( $the.fi, $the[0] );
    
    			// пропускаем
    			if(
    				$the.css('text-decoration') == 'underline' || // если стиль underline
    				text.match(/^[0-9+]$/) || // если текст число
    				$the.find( skipIfHasInside ).first().length || // если в A есть элементы
    				$the.is( skipIfHas ) || // если у A есть классы
    				false // easy life
    			  )
    				return;
    
    			if( disp == 'block' || disp == 'inline-block' || disp == 'table' || disp == 'table-cell' ){
    				$the.wrapInner('<foo class="ahwrap"></foo>');
    				$the.addClass('a_block__hov');
    			}
    			else
    				$the.addClass('a__hov');
    		});
    	};
    
    	// добавим класс a__hov_no к исключеням
    	$( skipFindIn ).addClass('a__hov_no');
    
    	$( findIn ).find('a').not('.a__hov_no, .a__hov_no a').addAHov();
    
    });

    А это css (SASS):

    @charset "UTF-8";
    
    // a hover effect ----------------------
    %a__hov_after{
    	content: '\2588'; // для цвета ▉ - 2588
    	line-height: 0;
    	font-size: 999em;
    	color:inherit;
    	overflow: hidden;
    	font-style: normal;
    	display: block;
    	position: absolute;
    	height: 1px;
    	width: 100%;
    	left: 0;
    	bottom: 0em;
    	visibility: hidden;
    	transition: all 150ms ease;
    	transform: scaleX(0);
    }
    %a__hov_hover_after{
    	visibility: visible;
    	transform: scaleX(1);
    }
    
    //.a__hov a:not(.button):not(.btn):not(.a__hov_none),
    .a__hov{ position: relative;
    	&:hover{ text-decoration:none !important; } // сброс
    
    	&:after{ @extend %a__hov_after; }
    	&:hover:after{ @extend %a__hov_hover_after; }
    
    	&.h__top:after{
    		top: -1px;
    		bottom:auto;
    	}
    }
    
    // для ссылок со свойством display: block их текст оборачивается в span отдельно
    //.a_block__hov a:not(.button):not(.btn):not(.a__hov_none),
    .a_block__hov{
    	&:hover{ text-decoration:none !important; } // сброс
    
    	& > .ahwrap{ position: relative; }
    	& > .ahwrap:after{ @extend %a__hov_after; }
    	&:hover > .ahwrap:after{ @extend %a__hov_hover_after; }
    }
    
    // очищает наведение на ссылку
    .a__hov_none a:after{ content: none !important; }

    Sass можете скомпилировать, чтобы посмотреть что получается. В сети есть онлайн компиляторы...

    Подключите js и стили, и уже должно работать. Возможно нужно будет настроить исключения в js...

    П.С. Вообще, это, не побоюсь этого слова, засерание DOM чем-то ненужным - красота требует жертв smile

    campusboy 2 года назад

    А разве просто CSS нельзя так сделать? Можно ведь. Или такой способ более кроссбраузерный?

    Kama 2 года назад

    В основе лежит обычный css, но не для всех ссылок подойдет он. Если у ссылки изначально underline стоит как-то странно будет это убирать, иногда это нужно. Если ссылка имеет свойство display:block то линия будет не под текстом...

    Вообще, даже на чистом css как это сделать? То что тут - это я придумал, в сети такого я не видел, там менее универсально предлагается. А мой способ подойдет к любой ссылке и для линии не нужно выставлять цвет, он заимствуется у цвета самой ссылки - это удобно - это была основа всего этого метода...

    П.С. если найдешь способ другой, скинь ссылку плз.

    Комментировать
На вопросы могут отвечать только зарегистрированные пользователи. Регистрация. Вход.