<内容>在锚标记内不会在悬停时切换光标 [英] <content> within an anchor tag isn't switching cursor on hover

问题描述

我有一个这样的模板

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

当我将鼠标悬停在自定义元素上时，我的光标是 cursor：text 而不是 cursor：pointer ，这是一个简单的修正来应用游标指针，但我感觉好像这些属性应该被继承。是否有任何方法可以应用 content 并正确地继承a属性？



jsfiddle示例



更新：1 b
$ b

更大的问题是，您无法右键单击并选择复制链接。

更新：2

我觉得我现在明白了，< content> 没有被传递高度或宽度，所以最外面的元素（自定义的）是高度0，宽度0.所以锚点没有扩展空间。因此光标不在切换。

尝试过，没有运气

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

更新3

$ b $
$ b

我不得不给锚点 id = anchor 并使用jQuery。

  $（this。$。anchor）.append（$（this）.html（））; 
  

由于某些原因，这不会导入字体超棒的图标。 b
$ b

也许是因为当我抓取HTML时，它不会通过样式导入？

控制台中没有错误。 p>

我在聚合物模板中删除了font-awesome，它的工作原理很糟糕。需要更好的解决方案。

解决方案

这是Chrome的当前Shadow DOM实现的一个bug，它将在Chrome 37中修复。

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.

解决方案

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

这篇关于<内容>在锚标记内不会在悬停时切换光标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！