Работа с эффектами наведения css

Содержание:

Licenses
- Personal/Open Source
- Commercial
Псевдоклассы, определяющие состояние элементов
Проявляющийся текст
- CSS
More Examples
Псевдоклассы, задающие язык текста
- :lang
More
Images
About Hover.css
- Licenses
- Commercial
Селекторы псевдоклассов — hover, focus, first-child и другие
Свечение и отражение
- CSS
About Hover.css
- Licenses
- Commercial
HTML:
JS:
CSS эффект описываем каркас блоков для трансформации
CSS-эффект появления тени при наведении
Menus
Пример использования

Licenses

Personal/Open Source

Use in unlimited personal applications
Your application can’t be sold
Your modifications remain open-source
Free updates

Commercial

For commercial use, Hover.css is made available under Commercial, Extended Commercial, and OEM Commercial licenses.

Commercial License

Use in 1 application
Sell your application once only (e.g. a website sold to a client)
Your code is kept proprietary, to yourself
Free updates to the major version

Extended Commercial License

Use in unlimited applications
Sell your applications an unlimited number of times (e.g. a website template sold on a theme store)*
Your code is kept proprietary, to yourself
Free updates to the major version

*With the exception of applications that allow end users to produce separate applications. See the OEM Commercial License.

OEM Commercial License

Hover.css was previously made available under a MIT License for both commercial and non-commercial use. Anyone that obtained a MIT license for commercial use before v2.2.0 (24th March 2017) may continue to use Hover.css versions prior to v2.2.0 under that same license.

Псевдоклассы, определяющие состояние элементов

Удалённая работа, работа на дому для личного помощника руководителя в москве

К этой группе относятся псевдоклассы, которые распознают текущее состояние элемента и применяют стиль только для этого состояния.

:active

Происходит при активации пользователем элемента. Например, ссылка становится активной, если навести на неё курсор и щёлкнуть мышкой. Несмотря на то, что активным может стать практически любой элемент веб-страницы, псевдокласс :active используется преимущественно для ссылок.

:link

Применяется к непосещенным ссылкам, т. е. таким ссылкам, на которые пользователь ещё
не нажимал. Браузер некоторое время сохраняет историю посещений, поэтому
ссылка может быть помечена как посещенная хотя бы потому, что по ней был зафиксирован
переход ранее.

Запись A {…} и A:link
{…} по своему результату равноценна, поскольку в браузере даёт один
и тот же эффект, поэтому псевдокласс :link можно
не указывать. Исключением являются якоря, на них действие :link не распространяется.

:focus

Применяется к элементу при получении им фокуса. Например, для текстового поля
формы получение фокуса означает, что курсор установлен в поле, и с помощью клавиатуры
можно вводить в него текст (пример 15.1).

Пример 15.1. Применение псевдокласса :focus

HTML5CSS 2.1IECrOpSaFx

Результат примера показан ниже (рис. 15.1). Во второй строке находится курсор, поэтому текстовое поле получило фокус.

Рис. 15.1. Изменение стиля текста при получении фокуса

В данном примере в текстовом поле содержится предварительный текст, он определяется
значением атрибута value тега <input>.
При щелчке по элементу формы происходит получение полем фокуса, и цвет текста
меняется на красный. Достаточно щёлкнуть в любом месте страницы (кроме текстового
поля, естественно), как произойдет потеря фокуса и текст вернётся к первоначальному
чёрному цвету.

Результат будет виден только для тех элементов, которые могут
получить фокус. В частности, это теги <a>, <input>, <select> и <textarea>.

:hover

Псевдокласс :hover активизируется, когда курсор
мыши находится в пределах элемента, но щелчка по нему не происходит.

:visited

Данный псевдокласс применяется к посещённым ссылкам. Обычно такая ссылка меняет
свой цвет по умолчанию на фиолетовый, но с помощью стилей цвет и другие параметры
можно задать самостоятельно (пример 15.2).

Пример 15.2. Изменение цвета ссылок

HTML5CSS 2.1IECrOpSaFx

Результат примера показан на рис. 15.2.

Рис. 15.2. Вид ссылки при наведении на неё курсора мыши

В данном примере показано использование псевдоклассов совместно со ссылками.
При этом имеет значение порядок следования псевдоклассов. Вначале указывается :visited, а затем идёт :hover,
в противном случае посещённые ссылки не будут изменять свой цвет при наведении
на них курсора.

Селекторы могут содержать более одного псевдокласса, которые перечисляются подряд через двоеточие, но только в том случае, если их действия не противоречат друг другу. Так, запись A:visited:hover является корректной, а запись A:link:visited — нет. Впрочем, если подходить формально, то валидатор CSS считает правильным любое сочетание псевдоклассов.

Браузер Internet Explorer 6 и младше позволяет использовать псевдоклассы :active и :hover только
для ссылок. Начиная с версии 7.0 псевдоклассы в этом браузере работают и для других элементов.

Псевдокласс :hover не обязательно должен применяться к ссылкам, его можно добавлять и к другим элементам документа. Так, в примере 15.3 показана таблица, строки которой меняют свой цвет при наведении
на них курсора мыши. Это достигается за счёт добавления псевдокласса :hover к селектору TR.

Пример 15.3. Выделение строк таблицы

HTML5CSS 2.1IECrOpSaFx

Результат примера показан ниже (рис. 15.3).

Рис. 15.3. Выделение строк таблицы при наведении на них курсора мыши

Проявляющийся текст

Работа с атрибутами и dom-свойствами элементов в javascript

Данный эффект очень напоминает использование JavaScript, когда при наведении курсора мыши на один объект проявляется другой. Для его получения изображение и текст помещаются в один контейнер , а затем все смещается влево, чтобы оба элемента находились на одном уровне. Затем применяем свойства color: transparent и line-height: 0px для элемента . Таким образом текст помещается вверх элемента и скрывается.

Для проявления текста при наведении курсора мыши, мы просто изменяем цвет и высоту строки. Так создается эффект масштабированного проявления текста.

CSS

#ex3 {
	width: 730px;
	height: 133px;
	line-height: 0px;
	color: transparent;
	font-size: 50px;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
	   font-weight: 300;
	text-transform: uppercase;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
}
 
#ex3:hover {
	line-height: 133px;
	color: #575858;
}
 
#ex3 img{
	float: left;
	margin: 0 15px;
}

More Examples

Example

Работа со списками в css

Select and style a <p>, <h1> and <a> element when you mouse over it:

p:hover, h1:hover, a:hover { background-color: yellow;
}

Example

Select and style unvisited, visited, hover, and active links:

/* unvisited link */a:link { color: green;}/* visited link */
a:visited { color: green;}/* mouse over link */
a:hover { color: red;}/* selected link */
a:active { color: yellow;}

Example

Style links with different styles:

a.ex1:hover, a.ex1:active { color: red;}
a.ex2:hover, a.ex2:active { font-size: 150%;}

Example

Hover over a <span> element to show a <div> element (like a tooltip):

div { display: none;}span:hover + div { display: block;}

Example

Show and hide a «dropdown» menu on mouse hover:

ul { display: inline; margin: 0; padding: 0;}ul li {display: inline-block;}ul li:hover {background: #555;}ul li:hover ul {display: block;}ul li ul { position: absolute;
width: 200px; display: none;}ul li ul li { background: #555;
display: block; }ul li ul li a {display:block !important;} ul li ul li:hover {background: #666;}

Псевдоклассы, задающие язык текста

Для документов, одновременно содержащих тексты на нескольких языках имеет значение соблюдение правил синтаксиса, характерные для того или иного языка. С помощью псевдоклассов можно изменять стиль оформления иностранных текстов, а также некоторые настройки.

:lang

Определяет язык, который используется в документе или его фрагменте. В коде HTML язык устанавливается через атрибут lang, он обычно добавляется к тегу <html>. С помощью псевдокласса :lang можно задавать определённые настройки, характерные для разных языков, например, вид кавычек в цитатах. Синтаксис следующий.

Элемент:lang(язык) { … }

В качестве языка могут выступать следующие значения: ru — русский; en — английский ; de — немецкий ; fr — французский; it — итальянский.

Пример 15.6. Вид кавычек в зависимости от языка

HTML5CSS 2.1IECrOpSaFx

Результат данного примера показан на рис. 15.6. Для отображения типовых кавычек в примере используется стилевое свойство quotes, а само переключение языка и соответствующего вида кавычек происходит через атрибут lang, добавляемый к тегу <q>.

Рис. 15.6. Разные кавычки для разных языков

Fullscreen VideoModal BoxesDelete ModalTimelineScroll IndicatorProgress BarsSkill BarRange SlidersTooltipsDisplay Element HoverPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsCirclesStyle HRCouponList GroupList Without BulletsResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioResponsive IframesToggle Like/DislikeToggle Hide/ShowToggle Dark ModeToggle TextToggle ClassAdd ClassRemove ClassActive ClassTree ViewRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageZoom HoverFlip BoxCenter VerticallyCenter Button in DIVTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarHide ScrollbarShow/Force ScrollbarDevice LookContenteditable BorderPlaceholder ColorText Selection ColorBullet ColorVertical LineDividersAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsJS String LengthJS Default ParametersGet Current URLGet Current Screen SizeGet Iframe Elements

Images

SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider

About Hover.css

All Hover.css effects make use of a single element (with the help of some pseudo-elements where necessary), are self contained so you can easily copy and paste them, and come in CSS, Sass, and LESS flavours.

Many effects use CSS3 features such as transitions, transforms and animations. Old browsers that don’t support these features may need some extra attention to be certain a fallback hover effect is still in place.

Licenses

Hover.css is made available under a free personal/open source or paid commercial licenses depending on your requirements. To compare licenses please visit the Ian Lunn Design Limited Store and purchase a commercial license.

Personal/Open Source

For personal/open source use, Hover.css is made available under a MIT license:

Use in unlimited personal applications
Your application can’t be sold
Your modifications remain open-source
Free updates

Commercial

For commercial use, Hover.css is made available under Commercial, Extended Commercial, and OEM Commercial licenses.

Commercial License

Use in 1 application
Sell your application once only (e.g. a website sold to a client)
Your code is kept proprietary, to yourself
Free updates to the major version

Purchase | Read full license

Extended Commercial License

Use in unlimited applications
Sell your applications an unlimited number of times (e.g. a website template sold on a theme store)*
Your code is kept proprietary, to yourself
Free updates to the major version

*With the exception of applications that allow end users to produce separate applications. See the OEM Commercial License.

Purchase | Read full license

For 1 Project

$14

Hover.css Extended Commercial License

For Unlimited Projects

$18

OEM Commercial License

Should your application enable end users to produce separate applications that incorporate Ian Lunn Design Limited’s software, for example, a development toolkit, library, or application builder, you must obtain an OEM Commercial License. Please contact us for more information about the OEM Commercial License.

MIT License (Pre v2.2.0 / 24th March 2017)

If you’d like to upgrade to v2.2.0 or above, or would like to simply show your support for Hover.css (we’d much appreciate it!), please purchase an up-to-date commercial license. Commercial License.

Селекторы псевдоклассов — hover, focus, first-child и другие

Например, селекторы Link и Visited во всех браузерах могут использоваться только для оформления гиперссылок:

Link подразумевает под собой не посещенную ссылку (по которой пользователь еще не переходил), а Visited — посещенную. Таким образом вы можете настроить, например, изменение цвета для уже посещенных пользователем ссылок, ну или еще что-то другое (задать визуальное состояние для всех посещенных гиперссылок). Естественно, что посещенные будут учитываться именно для данного конкретного браузера и до момента очистки его истории.

Синтаксис написания селекторов псевдоклассов заключается в проставлении двоеточия после названия Html элемента, для которого вы его используете (a:visited).

a:visited {color:red;}

Следующие три селектора (active, hover и focus) могут использоваться для любых тегов:

Active соответствует клику левой кнопки мыши по тому элементу в Html коде, название которого вы прописали перед этим псевдоклассом в селекторе (в нашем примере это ). Как только левую клавишу пользователь отожмет — псевдокласс active исчезнет.

p:active {color:red}

В этом случае, при наведении курсора мыши на любой абзац текста и щелчке по левой кнопке мыши, мы увидим, что цвет этого параграфа изменится на красный. После отжатия кнопки цвет абзаца опять вернется к принятому по умолчанию. Т.е. данный псевдокласс active динамичен и будет работать абсолютно для любых тэгов (например, для контейнеров Div и т.п.). При клике на этом элементе он может изменить свое визуальное оформление в соответствии с нашими пожеланиями.

Hover — позволяет изменять визуальное оформление любого элемента в Html коде при наведении на него курсора мыши. При отведении курсора визуальное оформление элемента вернется к используемому по умолчанию.

p:hover {color:red}

Псевдокласс focus — позволяет изменять визуальное оформление тегов находящимся сейчас в фокусе. Как известно, фокус на веб странице можно переносить с помощью нажатия на клавишу Tab на клавиатуре. Причем, фокус может передаваться только между следующими элементам: ссылки и элементы форм в Html.

Псевдоклассы active и hover в браузере IE 6 работают только для элементов гиперссылок, а focus не работает вообще ни в IE 6, ни в IE 7.

Последний псевдокласс называется first-child (первый ребенок, в переводе).

:first-child {color:red}

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

First-child в IE 6 не работает, что печально.

Свечение и отражение

Это замечательный и сложный эффект. Изначально изображения имеют небольшую прозрачность.Затем, когда на него наводится курсор мыши, прозрачность полностью убирается, появляется свечение вокруг и отражение (только для браузеров Webkit).

CSS

#ex5 {
	width: 700px;
	margin: 0 auto;
	min-height: 300px;
}
 
#ex5 img {
	margin: 25px;
	opacity: 0.8;
	border: 10px solid #eee;
 
	/*Трансформацияя*/
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
 
	/*Отражение*/
	-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)));
}
 
 
#ex5 img:hover {  
   opacity: 1;
 
   /*Отражение*/
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
 
   /*Свечение*/
  -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}

About Hover.css

Licenses

Personal/Open Source

For personal/open source use, Hover.css is made available under a MIT license:

Use in unlimited personal applications
Your application can’t be sold
Your modifications remain open-source
Free updates

Commercial

For commercial use, Hover.css is made available under Commercial, Extended Commercial, and OEM Commercial licenses.

Commercial License

Use in 1 application
Sell your application once only (e.g. a website sold to a client)
Your code is kept proprietary, to yourself
Free updates to the major version

Purchase | Read full license

Extended Commercial License

Use in unlimited applications
Sell your applications an unlimited number of times (e.g. a website template sold on a theme store)*
Your code is kept proprietary, to yourself
Free updates to the major version

*With the exception of applications that allow end users to produce separate applications. See the OEM Commercial License.

Purchase | Read full license

For 1 Project

$14

Hover.css Extended Commercial License

For Unlimited Projects

$18

OEM Commercial License

MIT License (Pre v2.2.0 / 24th March 2017)

HTML:

<div class=»hover3d»>
<ul>
<li>
<div class=»data»>
<a href=»#link»>
<img src=»/photo-1.jpg»/>
</a>
<div class=»info»>
<h3>Название фотографии</h3>
<p>Описание фотографии.</p>
</div>
</div>
</li>
<!— … —>
<li>
<div class=»data»>
<a href=»#link»>
<img src=»/photo-12.jpg»/>
</a>
<div class=»info»>
<h3>Название фотографии</h3>
<p>Описание фотографии.</p>
</div>
</div>
</li>
</ul>
</div>

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

<ul>

<li>

</a>

<h3>Название фотографии</h3>

<p>Описание фотографии.</p>

</div>

</li>

<!— … —>

<li>

</a>

<h3>Название фотографии</h3>

<p>Описание фотографии.</p>

</div>

</li>

</ul>

</div>

JS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

constnodes=.slice.call(document.querySelectorAll(‘li .data’),);

constdirections={‘top’,1’right’,2’bottom’,3’left’};

constclassNames=’in’,’out’.map((p)=>Object.values(directions).map((d)=>`${p}-${d}`)).reduce((a,b)=>a.concat(b));

constgetDirectionKey=(ev,node)=>{

const{width,height,top,left}=node.getBoundingClientRect();

constl=ev.pageX-(left+window.pageXOffset);

constt=ev.pageY-(top+window.pageYOffset);

constx=(l-(width2));

consty=(t-(height2));

returnMath.round(Math.atan2(y,x)1.57079633+5)%4;

}

classItem{

constructor(element){

this.element=element;

this.element.addEventListener(‘mouseover’,(ev)=>this.update(ev,’in’));

this.element.addEventListener(‘mouseout’,(ev)=>this.update(ev,’out’));

}

update(ev,prefix){

this.element.classList.remove(…classNames);

this.element.classList.add(`${prefix}-${directionsgetDirectionKey(ev,this.element)}`);

}

nodes.forEach(node=>newItem(node));

CSS эффект описываем каркас блоков для трансформации

Скачиваем подготовленный шаблон, в нем два файла, Index в котором подключен CSS. В CSS сбросили отступы, установили шрифт, и подключили на задний фон изображение. В самой папке /img лежат два файла, фон и картинка для примеры.

Начальный шаблон — скачать

Описываем все блоки, которые нужно вывести на страницу, и заполняем их текстовым содержанием.

div.dws>div.blocImg>img+div.blocText>div.text>h2+p

<section>
   <div class="dws">
      <div class="blocImg"><img src="img/1.jpg" alt="CSS эффект">
         <div class="blocText">
            <div class="text">
               <h2>CSS эффект <span>при наведении</span></h2>
               <p>transition<br> transform scale(x,y)<br>:hover ::before ::after</p>
            </div>
         </div>
      </div>
   </div>
</section>

Описываем основные стили картинки / эффект на css

Задаем блоку с картинкой фиксированную ширину и высоту, а при помощи overflow: hidden, скрываем все лишнее за ее пределами, добавляем курсор.

.blocImg {
 width: 600px;
 height: 338px;
 overflow: hidden;
 cursor: pointer;
}

Позиционируем для удобства блок посередине экрана.

.dws {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

Затем картинке делаем ширину в 100% и вешаем плавное анимирование в пол секунды.

.blocImg img {
 width: 100%;
 transition: .5s;
}

Далее трансформируем, немного разворачиваем rotate(-10deg), и увеличиваем в размере scale(1.3).

Задаем фильтр размытия в 1 пик. filter: blur(1px) и затемним фон, а для этого допишем классу .blocImg черный фон, а при наведении саму картинку делаем на половину прозрачной opacity: .5;.

.dws:hover .blocImg img {
 transform: rotate(-10deg) scale(1.3);
 filter: blur(1px);
 opacity: .5;
}

Теперь приступим к стилилизации текста.

Оформляем текстовое содержание блока

Абсолютно родителя позиционируем блок с текстом .blocText и задаем отступы по всем краям в 30 пик. По рамке в дальнейшем сделаем анимированное ее появление.

.blocText {
 outline: 1px solid orange;
 position: absolute;
 top: 30px;
 left: 30px;
 right: 30px;
 bottom: 30px;
}

Для текста задаем белый цвет, делаем заглавными буквами, устанавливаем padding по краям.

.text {
 color: #fff;
 text-transform: uppercase;
 padding: 0 20px;
}

Заголовку второго уровня задаем 25 пик.

.text h2 {
 font-size: 25px;
}

Вторую его часть делаем оранжевым цветом, устанавливаем отступы с низу для черты, и делаем нижнее подчеркивание в 2 пик .

.text h2 span {
 color: orange;
 padding-bottom: 3px;
 border-bottom: 2px solid #fff;
}

Параграф позиционируем абсолютно, опускаем его на 180 пик. задаем ширину его блока в 250 пик. Добавляем с левой стороны border в 4 пик. и задаем внутренние отступы.

.text p {
 position: absolute;
 top: 180px;
 width: 250px;
 border-left: 4px solid #ffb611;
 padding: 0 10px;
}

Описываем псевдоэлементы ::before и ::after

Уберем обводку outline, которую до этого задавали классу .blocText и зададим ее для псевдоэлементов.

Создаем псевдоэлементы ::before ::after , описываем их основные стили.

Позиционируем их абсолютно, задаем ширину и высоту по 100% и платное появление в пол секунды.

.blocText::before,
.blocText::after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

Отдельно ::before присваиваем бордюр с верху и низу в 1 пик. и задаем трансформацию для оси Х transform: scale(0,1).

.blocText::before {
 border-top: 1px solid #fff;
 border-bottom: 1px solid #fff;
 transform: scale(0,1);
}

Тоже самое делаем для ::after только бордюр теперь с левой и правой стороны, а трансформация по оси Y

.blocText::after {
 border-left: 1px solid #fff;
 border-right: 1px solid #fff;
 transform: scale(1,0);
}

А для их появления, трансформацию для всех осей указываем в 1.

.dws:hover .blocText::before,
.dws:hover .blocText::after {
 transform: scale(1,1);
}

И остается скрыть текст, для этого классу .text присвоим opacity: 0 и добавим плавное его появление.

А по наведении текст отображаем.

.dws:hover .text {
 opacity: 1;
}

В конечном итоге получили классный Hover Effects при наведение на картинку.

Урок подготовил Горелов Денис.

CSS-эффект появления тени при наведении

Начнем с самого простого эффекта – это эффект появления тени при наведении.

Заказать звонок

Предположим, у вас на сайте есть какая-то кнопка, блок, изображение или любой другой элемент, и вы хотите добавить к нему такой эффект. Для этого нам нужно будет сделать следующее:

1.Прежде всего, мы открываем страницу или запись или виджет, или файл темы, где у вас расположен этот элемент.

2.Далее нам нужно будет присвоить ему класс с названием hover-effect1. В моём примере он присвоен для кнопки и для изображения.

PHP

<div class=»coll-me-btn hover-effect1″>Заказать звонок</div>
<img src=»images/example3.jpg» alt=»Пример изображения для эффектов при наведении» class=»hover-effect1″ />

1
2
3

<div class=»coll-me-btn hover-effect1″>Заказатьзвонок<div>

Кстати, в WordPress, для того, что бы присвоить CSS-класс изображению не нужно переходить на вкладку «Текст», а можно просто кликнуть по изображению на вкладке «Визуально», далее кликнуть по значку карандашика.

Затем разворачиваем дополнительные настройки, и здесь мы можем дописать дополнительный CSS-класс. После чего нажимаем на кнопку «Обновить».

3.После того как мы присвоили нужный класс, нам нужно в файл style.css активной темы добавить определенный фрагмент кода, который собственно говоря, и позволит нам добавить тень.
4.Для внесения изменений в файл стилей либо подключаемся к нашему сайту по FTP. Я для этого обычно использую программу NotePad++.

Как пользоваться программой NotePad++ я рассказывала в этой статье: Редактирование файлов сайта в Notepad++

Либо же можно перейти в раздел «Внешний вид» => «Редактор». Здесь у нас обычно файл стилей открыт сразу же по умолчанию. Но на всякий случай убедитесь, что у вас в заголовке над рабочей областью написано «Таблица стилей (style.css)».

5.Прокручиваем в самый конец и здесь, в самом конце нашего файла нам необходимо добавить следующий CSS-код:

PHP

/**Появление тени**/
.hover-effect1 {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.hover-effect1:hover {
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
box-shadow:0 0 10px #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

/**Появление тени**/

.hover-effect1{

-webkit-transitionall0.5sease;

-moz-transitionall0.5sease;

transitionall0.5sease;

}

.hover-effect1hover{

-moz-box-shadow10px#000;

-webkit-box-shadow10px#000;

box-shadow10px#000;

-webkit-transitionall0.5sease;

-moz-transitionall0.5sease;

transitionall0.5sease;

}

После чего нажать на кнопку «Обновить файл» внизу страницы

Для того, чтобы у нас определённые CSS-свойства работали при наведении, нам необходимо использовать псевдокласс :hover.
CSS-стили, которые написаны для этого селектора будет работать только в том случае, когда на элемент наведен указатель мышки.

Далее для того, что бы эффект был более плавным, мы используем CSS-свойство transition. И здесь у нас указывается задержка в секундах, то есть, насколько плавно будет происходить смена CSS-эффектов.

Так же, для того, что бы эта тень у нас не только появлялась, но и исчезала плавно, нам необходимо свойство transition для самого класса hover-effect1

Так же для этой тени вы можете изменять смещение, уровень размытия, цвет и т.д. Более подробно об этом у меня было отдельное видео и отдельная статья, с которой вы можете ознакомиться по этой ссылке: Как сделать тень картинки в CSS?

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsCascading DropdownDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .hover() (две функции)</title>
		<style></style>			
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( "div" ).hover(function(){ // задаем функцию при наведении курсора на элемент	
	    $( "div" ).css( "background", "green" ) // задаем цвет заднего фона
	  	      .text("Курсор на элементе"); // задаем текстовое содержимое
	    }, function(){ // задаем функцию, которая срабатывает, когда указатель выходит из элемента 	
	    $( "div" ).css( "background", "red" ) // задаем цвет заднего фона
	  	      .text("Курсор вышел из элемента"); // задаем текстовое содержимое
	  });
	});
		</script>
	</head>
	<body>
		<div></div>
	</body>
</html>

В этом примере с использованием jQuery метода .hover() мы при наведении курсором мыши на элементе <div> задаем функцию, которая с использованием метода .css() задает цвет заднего фона элемента, а с использованием метода .text() задаем текстовое содержимое. После того как указатель выходит из элемента срабатывает вторая функция, которая также изменяет цвет заднего фона и изменяет текстовое содержимоей элемента <div>.

Результат нашего примера:

Пример использования jQuery метода .hover() (две функции)

Рассмотрим следующий пример в котором передадим в качестве параметра метода .hover() одну функцию:

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .hover() (одна функция)</title>
		<style></style>			
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( "div" ).hover(function(){ // задаем функцию при наведении курсора на элемент и при его отведении	
	    $( this ).toggleClass( "background-red" ) // добавляем, или убираем класс у текущего элемента div
	  });
	});
		</script>
	</head>
	<body>
		<div></div>
	</body>
</html>

В этом примере с использованием jQuery метода .hover() мы при наведении курсором мыши на элементе <div> задаем функцию, которая с использованием метода .toggleClass() добавляет класс элементу при наведении, и убирает класс у элемента, когда курсор выходит за элемент, то есть мы используем одну функцию для двух событий.

Результат нашего примера:

Пример использования jQuery метода .hover() (одна функция)jQuery события