<content> within an anchor tag isn't switching cursor on hover

问题

I should have specified that this is a polymer question and not native HTML.

I have a template like this

<template>
  <a href="{{ href }}">
    <content></content>
  </a>
</template>

When I hover over the custom element my cursor iscursor:text and not cursor:pointer, this is an easy fix to apply cursor pointer, but I feel as if those kind of properties should be inherited. Is there any way to apply the content and inherit the a properties properly?

Example on jsfiddle here

Update: 1

An even bigger issue with this is that you can't right-click and select copy-link either.

Update: 2

I kind of think I get it now, <content> isn't being passed a height or width, so the outer most element (the custom one) is height 0, width 0. So the anchor has no room to expand. Hence the cursor isn't switching.

tried, no luck

::content * {
  width:inherit;
  height:inherit;
}

Update 3

This kinda worked.

I had to give the anchor a id=anchor and use jQuery.

$(this.$.anchor).append($(this).html());

This won't import font-awesome icons for some reason, where does.

Perhaps it's because it's not importing over the styles when I grab the HTML?

There's no error in the console either.

I dropped the to font-awesome within the polymer template and it worked, which is kind of crappy. Need a better solution.

回答1:

This is a bug with Chrome's current implementation of Shadow DOM that will be fixed in Chrome 37.

回答2:

You have nothing to make a link out of; you're "linkifying" an empty block.

If you give <content> some innards, you'll see the inherited style:

<template>
  <a href="{{ href }}">
    <content> Here is a link. </content>
  </a>
</template>

Example Fiddle

回答3:

I have no idea how you're actually using this element, but http://jsbin.com/qaqigizajuvi/1/edit is a simple example of how to make at least what I think you're trying to achieve, work.

If you're using {{ name }} macros, you'll need to declare attributes for each name that you use. There's also no point in a <content> block if you just want a linktext: use another attribute macro in your definition:

<polymer-element name="monkey-test" attributes="href label" noscript>
  <template>
    <a href="{{ href }}">{{ label }}</a>
  </template>
</polymer-element>

and then instantiate it as either:

<monkey-test href="http://example.org" label="tadah"></monkey-test>

or set up a <monkey-test> element and then set its href and label attributes via JavaScript using e.href=... and e.label=... or e.setAttribute(name, value)

note that the noscript attribute is used here because there's no explicit script block with a new Polymer('monkey-test', { ... }) call. If we want a more complex element, we can't get away with noscript.

来源：https://stackoverflow.com/questions/25295815/content-within-an-anchor-tag-isnt-switching-cursor-on-hover