Usar CSS para hacer un intervalo no hacer clic

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

Soy bastante nuevo en CSS, tengo un caso simple como el anterior. Me gustaría hacer clic en "título" y "alguna URL", pero quiero hacer que la descripción no se pueda cliquear. ¿Hay alguna forma de hacerlo aplicando CSS en el tramo para que no se pueda hacer clic en lo que esté dentro de ese tramo? Mi restricción es que no quiero cambiar la estructura del div, en lugar de aplicar CSS, ¿podemos hacer un lapso dentro de una etiqueta de anclaje, no hacer clic?Usar CSS para hacer un intervalo no hacer clic

Fuente

2010-06-29 Shamik

HTML: Descripción
CSS: .noclick {display: none;} ;-) – Chad

@Shamik ¿verdad considere mover su tilde 'respuesta aceptada' a la segunda respuesta que usa 'puntero-eventos: ninguno;' ? –

Al usar CSS no se puede, CSS solo cambiará la apariencia del tramo. Sin embargo, usted puede hacerlo sin cambiar la estructura de la div mediante la adición de un controlador onclick al rango de medición:

<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>

A continuación, puede estilo para que se vea la ONU se puede hacer clic también:

<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>

Fuente

2010-06-29 19:44:10

Gracias por este comentario. Al pasar el cursor sobre el mouse, el cursor no cambia a su valor predeterminado * permanece como la mano *, ¿alguna idea de cómo solucionarlo? – Shamik

http://www.echoecho.com/csscursors.htm :-) –

+11

Con CSS puede usar 'pointer-events: none;'. Vea la respuesta a continuación por FRAGA. Lo he probado personalmente en Safari. –

No con CSS. Sin embargo, puedes hacerlo fácilmente con JavaScript cancelando el manejo de eventos predeterminado para esos elementos. En jQuery:

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

Fuente

2010-06-29 19:35:07 ceejayoz

Huh.¿Por qué cada vez que alguien hace preguntas relacionadas con html, javascript, etc. es decir, el lado del cliente ... la solución es Jquery. La pregunta no está etiquetada con javascript ni con Jquery. Sé que no puedes hacer esto solo con css, pero Jquery no es la solución. –

jQuery se usa aquí como/example/only. Dicho esto, en un gran porcentaje de situaciones prácticas jQuery es una muy, muy buena elección. El ejemplo aquí es muy adecuado para jQuery. –

Esta solución podría ser buena, pero así evitará que se haga clic en todos los espacios dentro de una etiqueta ... ¡y la duración del título debe estar clara para el evento de clic! – Zuul

CSS se utiliza para aplicar styling es decir, los aspectos visuales de una interfaz.

que hacer clic en un elemento de anclaje provoca una acción a realizar es un comportamiento aspecto de una interfaz, no es un aspecto estilístico.

No puede lograr lo que desea utilizando solo CSS.

JavaScript se utiliza para aplicar comportamientos a una interfaz. Puede usar JavaScript para modificar el comportamiento de un enlace.

Fuente

2010-06-29 19:36:53

Gracias por la información detallada. Ahora nunca olvidaré dónde usar CSS y dónde buscar javascript :) – Shamik

Depende de un punto de vista. Para mí, la propiedad que define si el botón está habilitado o deshabilitado debe ser parte del trabajo CSS/HTML (aspecto estilístico). El aspecto de comportamiento debe usarse solo para declarar si la propiedad existe o no (está activa o no). – Kryszal

Es bastante útil poder aplicar los eventos de puntero de regla: ninguno; con CSS cuando desea que un elemento y todos sus contenidos no sean cliqueables, especialmente si no conoce o no tiene control de los contenidos del elemento (es decir, del bloque de anuncios).Esto puede usarse junto con javascript, por ejemplo, si está cambiando los estados de vista y desea hacer que un elemento no se pueda hacer clic durante un tiempo o bajo ciertas condiciones. Aunque quizás no sea una separación perfecta de las capas de presentación y de lógica de negocios, en las aplicaciones de la vida real puede ser la solución más fácil y más fácil de mantener. –

CSS se refiere al estilo visual y no al comportamiento, por lo que la respuesta es no.

Sin embargo, puede usar javascript para modificar el comportamiento o cambiar el estilo del tramo en cuestión para que no tenga el dedo puntiagudo, el subrayado, etc. Si lo diseña de esa manera, todavía podrá hacer clic.

Mejor aún, cambie su marcado para que refleje lo que quiere que haga.

Fuente

2010-06-29 19:38:02 FinnNk

En respuesta a piemesons despotrica contra jQuery, una solución Vanilla JavaScript (TM) (probada en FF e IE):

Ponga esto en una etiqueta de secuencia de comandos después de cargar su marca (justo antes del cierre de la etiqueta de cuerpo) y usted ' Obtendré un efecto similar al del ejemplo jQuery.

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

Esto desactivará el clic en cada 2 ° intervalo dentro de una etiqueta a. También puede consultar el innerHTML de cada tramo para obtener "descripción", o establecer un atributo o clase y verificarlo.

Fuente

2010-06-29 20:54:26 NateDSaint

+1 para esta solución.Love u .. :-) –

179

En realidad, usted haga puede lograr esto a través de CSS. Hay una regla css casi desconocida llamada puntero-eventos. Aún se puede hacer clic en el elemento a, pero la duración de su descripción no será posible.

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

hay otros valores como: todos, accidente cerebrovascular, pintado, etc.

ref: http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/

ACTUALIZACIÓN: A partir de 2016, todos los navegadores aceptan ahora que: http://caniuse.com/#search=pointer-events

Fuente

2011-09-12 18:12:20 FRAGA

Aquí hay una referencia a [compatibilidad] (http://caniuse.com/#search=pointer-events) (básicamente, no IE u Opera). – Beez

¡Esto es hermoso! ¡Gracias! – LastTribunal

Bueno, eso es bastante molesto, esperaba escribir una clase CSS. Deshabilitada para deshabilitar los elementos de entrada sin que el dom se niegue a revelar sus valores (generalmente el dom da un valor de cadena vacía si una entrada está deshabilitada). Desafortunadamente, por más útil que sea, puedes tabular en los elementos si tienen un tabindex :( –

Sí puede .... puede colocar algo encima del elemento de enlace.

<!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>

la salsa mágica sucede en producto de tipo simple: antes de clase Qué está sucediendo aquí es que para cada elemento que tiene la clase de productos de tipo simple se crea algo que tiene la anchura y altura igual a la del producto tipo simple, luego aumente su índice z para asegurarse de que se colocará encima del contenido del producto tipo simple. Puede alternar el color de fondo si quiere ver qué está pasando.

aquí es un ejemplo del código https://jsfiddle.net/92qky63j/

Fuente

2016-07-01 15:56:53 KevinDaus

Usar CSS para hacer un intervalo no hacer clic

Respuesta

Cuestiones relacionadas