Выделение текста внутри псевдоэлементов.

[sergey032]

День добрый.

.mh46{	display: block;	position: relative;	width: 235px;	padding: 3px; 	-webkit-transform: translateZ(0);	transform: translateZ(0);	box-shadow: 0 0 1px rgba(0, 0, 0, 0);	margin-top: 8px;}.mh46:before{	content: " ";	position: absolute;	border: #e1e1e1 solid 1px;	border-radius: 5px;	top: 0;	right: 0;	bottom: 0;	left: 0;	-webkit-transition-duration: 0.3s;	transition-duration: 0.3s;	-webkit-transition-property: top, right, bottom, left;	transition-property: top, right, bottom, left;}.mh46:hover{	background: #EFEFEF;}.mh46:hover:before, .mh46:focus:before, .mh46:active:before {	top: -8px;	right: -8px;	bottom: -8px;	left: -8px;}

Сделал блок DIV с тестовым содержимым:

<div class="mh46">    <img src="...tra-ta-ta/icons.png" style="float: left; padding-right: 6px;" />    <span>text</span></div>

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

Подскажите, пожалуйста, что подправить нужно...

 

Исходники ниже.

Нашел статью о hover-эффектах здесь: http://ianlunn.github.io/Hover/#

CSS из нее здесь: https://github.com/IanLunn/Hover/blob/master/css/hover.css

[ows.nightwolf]

У вас псевдоэлемент :before из-за назначеного ему свойства position: absolute "перекрывает" ваш <span>, Задайте спану позиционирование:

span {  position: relative;}