Использовать CSS для создания непрозрачного диапазона

<html>
    <head>
    </head>
    <body>
        <div>
            <a href="#" onclick="location.href='http://www.google.com'; return false;">
                <span>title<br></span>
                <span>description<br></span>
                <span>some url</span>
            </a>
        </div>
    </body>
</html>

Я новичок в CSS, у меня есть простой случай, как выше. Я хотел бы сделать клики по названию и некоторому URL, но хочу, чтобы описание было не кликабельным. Есть ли способ сделать это, применив некоторый CSS к диапазону, чтобы внутри этого диапазона не было кликабельности. Мое ограничение заключается в том, что я не хочу изменять структуру div, вместо этого, просто применяя css, можем ли мы создать диапазон, который находится внутри тега привязки, не кликабельный?

Ответы

Ответ 1

С помощью CSS вы не можете, CSS изменит внешний вид диапазона. Однако вы можете сделать это, не изменяя структуру div, добавив обработчик onclick в span:

<html>
<head>
</head>
<body>
<div>
<a href="http://www.google.com">
  <span>title<br></span>
  <span onclick='return false;'>description<br></span>
  <span>some url</span>
</a>
</div>
</body>
</html>

Затем вы можете создать стиль так, чтобы он выглядел также без клика:

<html>
<head>
     <style type='text/css'>
     a span.unclickable  { text-decoration: none; }
     a span.unclickable:hover { cursor: default; }
     </style>
</head>
<body>
<div>
<a href="http://www.google.com">
  <span>title<br></span>
  <span class='unclickable' onclick='return false;'>description<br></span>
  <span>some url</span>
</a>
</div>
</body>
</html>

Ответ 2

На самом деле, вы можете достичь этого с помощью CSS. Там почти неизвестное css-правило с именем pointer-events. Элемент по- прежнему будет кликабельна, но ваш диапазон описание не будет. a

a span.description {
    pointer-events: none;
}

Существуют и другие значения, такие как: все, обводка, раскрашивание и т.д.

ссылка: http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/

ОБНОВЛЕНИЕ: с 2016 года все браузеры теперь принимают его: http://caniuse.com/#search=pointer-events

Ответ 3

Не с CSS. Однако вы можете сделать это с помощью JavaScript, отменив обработку событий по умолчанию для этих элементов. В jQuery:

$('a span:nth-child(2)').click(function(event) { event.preventDefault(); });

Ответ 4

CSS используется для применения стилей, то есть визуальных аспектов интерфейса.

Чтобы щелчок на элементе привязки вызывало действие, это поведенческий аспект интерфейса, а не стилистический аспект.

Вы не можете достичь того, что хотите, используя только CSS.

JavaScript используется для применения поведения к интерфейсу. Вы можете использовать JavaScript для изменения поведения ссылки.

Ответ 5

В ответ на piemesons rant против jQuery, решение Vanilla JavaScript (TM) (проверено на FF и IE):

Поместите это в тег script после загрузки разметки (непосредственно перед закрытием тега body), и вы получите аналогичный эффект для примера jQuery.

a = document.getElementsByTagName('a');
for (var i = 0; i < a.length;i++) {
  a[i].getElementsByTagName('span')[1].onclick = function() { return false;};
}

Это приведет к отключению щелчка по каждому 2-му диапазону внутри тега. Вы также можете проверить innerHTML каждого диапазона для "описания" или установить атрибут или класс и проверить это.

Ответ 6

Да, вы можете... вы можете поместить что-то поверх элемента ссылки.

<!DOCTYPE html>
<html>
<head>
    <title>Yes you CAN</title>
    <style type="text/css">
        ul{
            width: 500px;
            border: 5px solid black; 
        }
        .product-type-simple {
            position: relative;
            height: 150px;
            width: 150px;
        }
        .product-type-simple:before{
            position: absolute;
            height: 100% ;
            width: 100% ;
            content: '';
            background: green;//for debugging purposes , remove this if you want to see whats behind
            z-index: 999999999999;
        }
    </style>
</head>
<body>
<ul>
    <li class='product-type-simple'>
        <a href="/link1">
            <img src="http://placehold.it/150x150">
        </a>
    </li>
    <li class='product-type-simple'>
        <a href="/link2">
            <img src="http://placehold.it/150x150">
        </a>
    </li>
</ul>
</body>
</html>

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

вот пример кода https://jsfiddle.net/92qky63j/

Ответ 7

CSS относится к визуальному стилю, а не к поведению, поэтому ответ на самом деле не является.

Однако вы могли бы использовать javascript для изменения поведения или изменения стиля рассматриваемого диапазона, чтобы у него не было заостренного пальца, подчеркивания и т.д. Стилизация такого стиля все равно оставит его доступным.

Еще лучше, измените свою разметку, чтобы она отражала то, что вы хотите.