Question

所以我有2个链接，它们都链接到同一个东西，甚至只是在不同的行上。但是，由于我用于链接的格式化，我不得不将其分解为两个。现在它只是看起来很奇怪当你在一个上面而它并没有突出另一个...所以如果有一种方法可以让另一个选择＆＃34;选择＆＃34; （好吧，徘徊），你能分享一下吗？

这是我的代码：

（我知道链接颜色与其背景有垃圾对比。稍后我会修复它，一旦我解决了这个问题。我也知道点击链接给出了一个错误。我没有为他们添加JavaScript）

＆＃13;

.linko {
  font-size: 12px;
  font-family: arial;
  text-align:center;
  position: relative;
  height: 41px;
  width: 65px;
  margin: 2px 0px 2px 25px;
  display: inline-block;
  vertical-align: top;
  background-color: #69A373;
  border-radius: 7px;
}

a:link,
a:visited,
a:active {
  position: relative;
  display: inline-block;
  text-decoration: none;
  border-bottom: 1px dashed #3C654D;
  color: #3C654D;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
}

a:hover {
  color: #163A29;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
}

a:before {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  height: 1px;
  width: 0;
  background: transparent;
  transition: width .5s ease, background-color .5s ease;
}

a:after {
  content: '';
  display: block;
  height: 1px;
  width: 0px;
  background: transparent;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
}

a:hover:before,
a:hover:after {
  width: 100%;
  background-color: #163A29;
}

＆＃13;

<div class="linko">
  <a style="position:relative;top:4px;display:inline-block;" href="javaScript:void(0);" onClick="load_alerts();">Alerts</a>
  <br />
  <a style="position:relative;display:inline-block; margin-top:5px;" href="javaScript:void(0);" onClick="load_alerts();">(2)</a>
  <div style="display:none;" id="recent-alerts">
    <div class="tableborder">
      <div class="pformstrip">Recent Alerts
        <div style="float: right;"><a href="javascript:document.getElementById('recent-alerts').style.display='none';void(0);">[x]</a>
        </div>
      </div>

      <span id="recent-alerts-data"></span>
      <div style="text-align: center;" class="pformstrip">
        <a title="View All Alerts" href="http://pjonline.tk/index.php?act=UserCP&amp;CODE=alerts">View All Alerts</a> · <a title="Mark All Read" href="javascript:read_alerts();">Mark All Read</a>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

根据要求更新：这是使用OP中的确切代码，并使用jquery将addClass应用于带有伪元素onHover的多个$('a').hover(function(){ $('a').addClass('active'); },function(){ $('a').removeClass('active'); });链接。

https://jsfiddle.net/norcaljohnny/cz8st2fv/

您可以使用addClass以多种方式影响链接。以下是在所有“a”链接上使用背景的示例。

https://jsfiddle.net/norcaljohnny/9gru7Lmx/

a:hover:before,
a:hover:after, a.someclass{
  width: 100%;
  background-color: #163A29;
}

如果要添加伪类，则有不同的方法。在这种情况下，只需创建一个新类，我使用jquery在hover上创建了一个.comeclass和addClass。看看你的css和jquery的最后一行，看看我做了什么。它反过来附加'a'。

CSS

$('a').hover(function(){
    $('a').addClass('someclass');
},function(){
    $('a').removeClass('someclass');
});

Jquery的

public static void formatText(String text, char justified, int wide) {
        int space = wide - text.length();
        switch(justified){
          case 'r':
            for (int num = 0; num < space; ++num) {
                System.out.print(" ");
            }
            System.out.println(text);
            break;
         case 'l':
           System.out.print(text);
           for (int num = 0; num < space; ++num) {
                System.out.print(" ");
           }
           System.out.println();
           break;
         case 'c':
           for(int num = 0;num < (wide - text.length())/2 ; ++num){
              System.out.print(" ");
           }
           System.out.print(text);
           for(int num = 0;num < (wide - text.length())/2 ; ++num){
              System.out.print(" ");
           }
           System.out.println();
           break;
       }
    }
}

Jsfiddle Demo

使2个链接出现在同一时间

1 个答案: