We Keep Coding

Anchor Tag is Clickable Across Width of Screen

I am working on a small app and have found a strange bug. I am currently using anchor tags to represent buttons in my app, I could change these to actual buttons instead, but I've decided to stick with anchors for now.
However, I've noticed that the anchor tags are clickable across the entire width of the screen. Could someone please point out why this is occurring? I am assuming it is something wrong with my CSS.
Please see below for an example.
#commentList {
list-style-type: none;
padding: 0;
margin: 0;
display:block;
}
#commentList li a {
width: 364px;
border: 1px solid #ddd;
margin-top: -1px;
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
color: black;
display: block;
}
<ul id="commentList">
<li onclick=functionA() title="Activate function A."><a href="#" >Function A</a></li>
<li onclick=functionB() title="Activate function B."><a href="#" >Function B</a></li>
<li onclick=functionC() title="Activate function B."><a href="#" >Function C</a></li>
</ul>

That's because your onclick=functionA() is on the li tag, not on the anchor tag, and the lis span the whole width since they are block elements without a width setting.

I think this is your issue:
Change:
#commentList li a {
width: 364px;
border: 1px solid #ddd;
margin-top: -1px;
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
color: black;
display: block;
}
To:
#commentList li a {
border: 1px solid #ddd;
margin-top: -1px;
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
color: black;
display: block;
}
#commentList li {
width: 364px;
}
The width is being applied to the <a> tag, not the <li>. You can make it so the width of the <li> is still 346px and still have the <a> tag work correctly within it.
See the JSFiddle: https://jsfiddle.net/d4g8f59h/

On the a tag, instead of display: block; do display: inline-block;

How can I make "div" as "a href" without "a" tag?

In Wired they using a card as a link, like Image.
So, I tried "document.location.href" script on div.
but it isn't display a link like Image.
and also click with command key doesn't work.
How can I make div as a href using script?

try this in your div tag:
onClick="window.open('href');"

You can do it with JS.
HTML
<div id='div-id'>Click Here</div>
JS
document.getElementById('div-id').onclick = function(){window.open('http://url.url')};

Note: the link won't actually work inside of the StackOverflow snippet below because it's inside of a sandboxed iframe, but this code otherwise will work in normal contexts:
div {
cursor: pointer;
border: 2px solid gray;
border-radius: 4px;
height: 200px;
width: 200px;
display: flex;
justify-content: center;
align-items: center;
}
<div onclick="window.open('https://www.wired.com')">click me to go to wired</div>

Actually, WIRED simply wraps the card image and text is anchor tags and applies styling to change the hover event, like so.
.card {
width: 300px;
height: 450px;
background: #eee;
border-radius: 6px;
border: 1px #ccc solid;
margin-top: 30px;
}
.card:hover {
transform: translateY(-5%);
transition: transform 350ms ease-out;
}
.card-link {
margin: 12px 5px;
font-family: "Roboto", san-serif;
font-size: 1.3em;
text-align: center;
display: block;
}
a.card-link {
text-decoration: none;
color: #595959;
}
a:hover.card-link {
color: #999999;
transition: color 200ms ease-in;
}
.card-link-image > img {
display: block;
margin: 5px auto 15px;
max-width: 100%;
height: auto;
border-radius: 6px;
box-shadow: 2px 2px 1px #595959;
}
.card-link-image > img:hover {
box-shadow: 3px 3px 1px #333333;
transform: translateX(-1px);
transition: transform 100ms ease-in;
}
<div class="card">
<a class="card-link-image" to="https://google.com"><img src="https://source.unsplash.com/285x285" alt="image"/></a>
<a class="card-link" href="https://google.com">Link 1</a>
<a class="card-link" href="https://google.com">Link 2
</a>
</div>
you can see it in example is this codepen. And while its very much possible to use a div as a link using the methods in both Guy L, kdedorov91, and dauzduz TV answers, I wouldn't recommend doing it.
Every element has a role it plays in the page and the browser has a tendency to takes offense when a tag isn't being used properly in the form of error and warning messages in the console.
If you do decide to use one of the aforementioned answers be sure to set the role attribute on the div to link.

OnMouseOver - add CSS to different tags than the hovered tag

I have a menu bar and around it a <div>, I have an <a> in the <div>, and when I hover the mouse on the <a> I want the left border color to change in the <div>. How can i do that?
I want to add a CSS-style to the <div> when I hover on the <a> link.
Html:
<div id="meny" class="meny">
Home
</div>
Css:
a.linksM{
color: black;
display: inline-block;
padding: 10px;
margin: 0px;
font-size: 13pt;
font-family: "vandetta", "arial", sans-seriff;
font-weight: bold;
}
div.meny{
border: solid 4px;
border-color: #82b919;
background-color: #82b919;
border-radius: 5px;
border-bottom-color: #006600;
border-top-color: #006600;
border-top: 0px;
}
#home:hover{
border-left-color: #006600;
}

The best way to do this is via CSS. In particular, you can use the pseudoclass hover
div a:hover {
border-left: 1px solid blue;
}
It's also possible to do this in native JavaScript
var myLink = document.querySelector("div a");
myLink.addEventListener("mouseover", function() {
this.parentNode.classList.add("new-border");
});
myLink.addEventListener("mouseout", function() {
this.parentNode.classList.remove('new-border');
});
And in jQuery as well
$("div a").on("mouseover", function() {
$(this).parent().addClass("new-border");
})
.on("mouseout"), function() {
$(this).parent().removeClass("new-border");
});

If you want to do it using jQuery then following code will help you.
$(document).ready(function(){
$("div a").mouseover(function(){
$("div").addClass("classname");
});
$("div a").mouseout(function(){
$("div").removeClass("classname");
});
});

You can use jQuery .parent() to target the div containing your link.
$('a').hover(function() {
$(this).parent().toggleClass('green-border');
});
Here is an example : http://jsfiddle.net/lddz/5kdo4bcm/1/

I would recommend against using javascript to achieve this.
This can be achieved using CSS in several different ways.
Here is a jsFiddle
If you use a HTML strucure for a basic menu:
<nav>
<ul>
<li>
<a href='#'>Link 1</a>
</li>
<li>
<a href='#'>Link 2</a>
</li>
<li>
<a href='#'>Link 3</a>
</li>
</ul>
</nav>
Then you can add CSS like this:
nav a {
text-decoration: none;
display: block;
padding: 6px 10px;
border-left: 2px solid transparent;
}
nav a:hover {
border-left: 2px solid red;
}

give the div 2 classes
HTML code
<div id="link-container" class="normal">
Link Name
</div>
CSS code
div.normal {
position: relative;
margin: 0 0 0 3px;
padding: 5px 20px;
width: 100px;
height: 50px;
background: none;
color: rgba(0, 0, 0, 1);
border: 2px groove rgba(0, 0, 0, 1);
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
div.hover {
border-left: 5px solid purple;
margin: 0;
}
#link {
color: black;
font-family: "Courier New";
font-weight: 400;
line-height: 50px;
text-decoration: none;
text-align: center;
width: 100%;
height: 100%;
}
#link:hover {
font-weight: 900;
text-decoration: underline;
}
Javascript/jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#link-container').removeClass('hover'); //prevents on load accidental hover and glitching
$('#link').on('mouseover', function(){
$('#link-container').addClass('hover')}).on('mouseout', function() {
$('#link-container').removeClass('hover')
});
});
</script>

Removing Chrome style for input text (list)

I am trying to build a custom input text list. I have an image I would like to use as arrow, so that I can click and show the list of values.
I am also using AngularJS.
The following code does not work as expected. My issue is: I see a black arrow on the left of the yellow arrow when passing over or clicking (otherwise no arrow)
Here's a link to try it (no yellow arrow is shown, but there is some white space on the right of the undesired black arrow): http://jsfiddle.net/wbo3pt9u/
Here's the code.
<input type="text" list="typeL" ng-model="tipo" class="list" placeholder="Type">
<datalist id="typeL">
<option ng-repeat="objectType in objectTypes"
value="{{objectType.typeWorkOfArt}}" } />
</datalist>
</input>
CSS:
.list {
background: url('../images/arrow.png') no-repeat top right;
border-radius: 20px;
width: 160px;
height: 33px;
-webkit-appearance: none;
border: 2px solid #c1c4c6;
line-height: 29px;
cursor: pointer;
font-weight: normal !important;
font-style: italic;
font-size: 1.250em;
padding:0 30px 0 10px !important;
color: #58585A;
overflow: hidden;
margin: 10px;
}
.input {
border-radius: 20px;
width: 160px;
height: 33px;
-webkit-appearance: none;
border: 2px solid #c1c4c6;
line-height: 29px;
cursor: pointer;
font-weight: normal !important;
font-style: italic;
font-size: 1.250em;
padding: 0 1em;
color: #58585A;
margin: 10px;
}
I also tried to use a , which worked correctly: no black arrow and single click. Now that I switched to this element, it does not work. How can I fix it?

Solved by introducing this CSS lines:
input::-webkit-calendar-picker-indicator {
display: none;
}

OnClick style change

I'm trying to retain the hover style state on my links when I click on them, kind of like a tabbing effect. It doesn't seem to be working, hoping someone can help me with it.
CSS:
.nav {
position: absolute;
z-index: 1000;
font-family: Asap;
right: 100px;
top: 70px;
}
.nav a, .nav a:active, .nav a:visited {
font-family: 'Asap', sans-serif;
color: #fff;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: black 0.1em 0.1em 0.2em;
}
.nav a:hover {
font-family: Asap;
color: #fff;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
border-top: 2px solid #fff;
padding-top: 5px;
}
.nav2 a {
font-family: Asap;
color: #fff;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
border-top: 2px solid #fff;
padding-top: 5px;
}
Script:
$('div.nav > a').click(function(){
$(this).parent().removeClass('nav').addClass('nav2');
});
HTML:
<div class="nav" onclick="javascript:showlayer('myName')">
<span class="btn1">Design </span>
<span class="btn2">Neighbourhood
</span>
<span class="btn3">Media </span>
<span class="btn4">Developer </span>
<span class="btn5">Contact </span>
<br><br><br><br><br><br><br><br><br><br>
</div>

You could just do something purely Javascript by declaring a different style onClick.
var change = document.getElementById("Link Id"); //Define the link in a variable
change.onClick=function() { //Activate the function when clicked
change.style.fontFamily=("Asap");
change.style.color=("#fff");
change.style.fontSize=("12px");
change.style.textDecoration=("none"); //Change the link attributes
change.style.textTransform=("uppercase");
change.style.letterSpacing=("1px");
change.style.borderTop=("2px solid #fff");
change.style.paddingTop= ("5px");
}
This should change the link style to the hover style after you click the link. Just make sure you assign your link an id. Make sure you know basic Javascript like the src tag to call it:
<script type = "text/javascript" src = "externaljavascript.js"></script>
And don't forget to refrain from using the tags in the external script.