Ik ben vrij nieuw in CSS, ik heb een eenvoudig geval zoals het bovenstaande. Ik wil de “titel” en “een url” klikbaar maken, maar wil de beschrijving als niet-klikbaar maken. Is er een manier om dat te doen door wat CSS op de overspanning toe te passen, zodat er niet op kan worden geklikt, wat binnen die spanwijdte ook is.
Mijn beperking is dat ik de structuur van de div niet wil veranderen, maar in plaats daarvan alleen css wil toepassen. Kunnen we een span maken dat zich in een ankertag bevindt en niet klikbaar is?
Antwoord 1, autoriteit 100%
Eigenlijk kunt udit bereiken via CSS. Er is een bijna onbekende CSS-regel genaamd pointer-events. Op het a-element kan nog steeds worden geklikt, maar uw beschrijvingsbereik niet.
a span.description {
pointer-events: none;
}
er zijn andere waarden zoals: alles, streek, geschilderd, enz.
ref: http ://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/
UPDATE: vanaf 2016 accepteren alle browsers het nu: http://caniuse.com/# search=pointer-events
Antwoord 2
Niet met CSS. U kunt het echter eenvoudig met JavaScript doen door de standaardafhandeling van gebeurtenissen voor die elementen te annuleren. In jQuery:
$('a span:nth-child(2)').click(function(event) { event.preventDefault(); });
Antwoord 3
CSS wordt gebruikt voor het toepassen van styling, d.w.z. de visuele aspecten van een interface.
Dat het klikken op een ankerelement ervoor zorgt dat een actie wordt uitgevoerd, is een gedragsaspectvan een interface, geen stilistischaspect.
Je kunt niet bereiken wat je wilt met alleen CSS.
JavaScript wordt gebruikt voor het toepassen van gedrag op een interface. U kunt JavaScript gebruiken om het gedrag van een link te wijzigen.
Antwoord 4
Als reactie op piemesons tegen jQuery, een Vanilla JavaScript(TM)-oplossing (getest op FF en IE):
Zet dit in een scripttag nadat uw opmaak is geladen (vlak voor het sluiten van de body-tag) en u krijgt een soortgelijk effect als het jQuery-voorbeeld.
a = document.getElementsByTagName('a');
for (var i = 0; i < a.length;i++) {
a[i].getElementsByTagName('span')[1].onclick = function() { return false;};
}
Hierdoor wordt de klik op elke 2e span in een a-tag uitgeschakeld.
U kunt ook de inner-HTML van elke reeks controleren op “beschrijving”, of een attribuut of klasse instellen en dat controleren.
Antwoord 5
Dit is de eenvoudigste manier waarop ik het zou hebben gedaan. Zonder grenzen aan CSS of javascript :
<html>
<head>
</head>
<body>
<div>
<p>
<a href="http://www.google.com">
<span>title<br></span>
</a>
<span>description<br></span>
<a href="http://www.google.com">
<span>some url</span>
</a>
</p>
</div>
</body>
</html>Antwoord 6
Ja dat kan….
je kunt iets bovenop het link-element plaatsen.
<!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="https://placehold.it/150x150">
</a>
</li>
<li class='product-type-simple'>
<a href="/link2">
<img src="https://placehold.it/150x150">
</a>
</li>
</ul>
</body>
</html>
de magische saus vindt plaats in de klas product-type-simple:before
Wat hier gebeurt, is dat je voor elk element met de klasse product-type-simple ietsmaakt dat de breedte en hoogte heeft gelijk aan die van het product-type-simple , dan vergroot je de z- index om ervoor te zorgen dat het zichzelf bovenop de inhoud van product-type-simple plaatst. U kunt de achtergrondkleur wijzigen als u wilt zien wat er aan de hand is.
hier is een voorbeeld van de code
https://jsfiddle.net/92qky63j/
Antwoord 7
CSS heeft betrekking op visuele styling en niet op gedrag, dus het antwoord is eigenlijk nee.
Je zou echter ofwel javascript kunnen gebruiken om het gedrag aan te passen of de stijl van de betreffende spanwijdte te veranderen, zodat deze niet de puntige vinger, onderstreping, enz. heeft. Door het zo te stylen blijft het nog steeds klikbaar.
>
Nog beter, verander je markeringen zodat deze overeenkomt met wat je wilt dat het doet.
Antwoord 8
Als je CSS niet gebruikt, zal CSS alleen het uiterlijk van de span veranderen. U kunt dit echter doen zonder de structuur van de div te wijzigen door een onclick-handler aan de span toe te voegen:
<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>
Je kunt het dan opmaken zodat het er ook niet-klikbaar uitziet:
<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>