<a href=" window.open (...) "> 不工作

Question

我有两段文字，一段右对齐，一段左对齐。右侧的文本工作正常并且 links 到正确的页面，但是，左侧的 links 不起作用。它们甚至不显示为 links。该网站在这里 - http://kingdombrand.com/Film/Films/TestFilm（ps。只能通过 link 访问，无法在网站导航中找到）

这是使用的代码

<div class="VideoText" align="left">
    <a href=""><span> <strong> Credits </strong> </span></a> <br>                    
    Directed By: <a href="http://www.kingdombrand.com/Film/Alek/Portfolio"> Link One </a> <br>
    Edited By:   <a href="http://www.kingdombrand.com/Film/Jess/Portfolio"> Link Two </a>
    <br>                                 
    <br>                           
</div>

<!-- S H A R E-->
<div class="VideoShare" align="right">
    <b> Share </b> <br>
    <a href="http://www.twitter.com/share">Twitter</a><br>
    <a href="#" onclick=" window.open(
      'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href), 
      'facebook-share-dialog', 
      'width=626,height=436'); 
       return false;">
       Facebook
    </a>
    <br>
</div>

这里是 CSS:

.VideoText {
   position: absolute;
    left: 200px;
    top:  475px;
    overflow:visible
}

.VideoShare {
   position: absolute;
    Left: 200px;
    width:67.5%;
    top:  475px;
    overflow:visible;
}

Answer 1

这些链接有效，它们只在您的 div.VideoShare 范围内。在后者上放置 display: none; 并将鼠标悬停在链接上以检查它们。

我无法为您提供可靠的 CSS 解决方案。就个人而言，我会 float: right（或 display: inline-block）视频共享按钮，因此它们包含的 div 不会水平拉伸 100%。不过可能会有更好的解决方案。

Answer 2

试试这个

.VideoText {
   position: absolute;
    left: 100px;
    top:  475px;
    overflow:visible
}

.VideoShare {
   position: absolute;
    Left: 300px;
    width:67.5%;
    top:  475px;
    overflow:visible
}

Answer 3

将z-index: 1;放到

.VideoText {
}

Answer 4

似乎是一个 z-index 问题，只需为两者添加一个 z-index:

.VideoText {
    position: absolute;
    left: 200px;
    top:  475px;
    overflow:visible;
    z-index: 2;
}

.VideoShare {
    position: absolute;
    Left: 200px;
    width:67.5%;
    top:  475px;
    overflow:visible;
    z-index: 1;
}

来自MDN：

The z-index property specifies the z-order of an element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one.

Answer 5

您的 .VideoShare div 覆盖了您的链接。尝试删除宽度并将 div 放置在右边而不是左边。因为你需要它在右边。

.VideoShare {
  ...
  /* left: 200px; */
  right: 200px;
  /* width: 67.5%; */
  ...
}

Answer 6

解决方案很简单 )) 左边的 Link 是正确的，但被 div 和 class="VideoShare" 覆盖了。您可以尝试将 left:200px 更正为 left:400px 例如 class="VideoShare" 希望您能理解我的意思

Answer 7

正如我在上面的评论中所说，您的两个容器只是彼此重叠。您可以使两个容器的宽度相同，并将右侧的容器移动到具有绝对定位的右侧。

.VideoShare {
    left: auto;
    top: 475px;
    width: 200px;
    right: 200px;
    position: absolute;
}

<a href=" window.open (...) "> 不工作

<a href=" window.open (...) "> not working

html

css

hyperlink