Change hover color on ::after?

时间:2015-07-29 00:26:29

标签: html css hover

I'm unable to change the color of a hover on a SecondViewController Code: class SecondViewController: UIViewController { override func prepareForSegue(segue: UIStoryBoardSegue, sender: AnyObject?) { if let identifier = segue.identifier { if let destination = segue.destinationViewController as? ViewController { if identifier == "unwind" { destination.string = "We Just Passed Data" } } } } } ViewController Code: class ViewController: UIViewController { var string = "The String That Will Be We Just Passed Data" @IBAction func unwindSegue(segue: UIStoryBoardSegue) { } } .
I was able to change the color of the ::after to red from black without hover.

The ::after is actually an arrow transformed from previous CSS coding. It's supposed to point the ::after expanding a drop down menu.

<span>Issues</span>
.sf-with-ul:after {
  content: '';
  position: absolute;
  top: 50%;
  margin-top: -3px;
  height: 0;
  width: 0;
  border: 5px solid transparent;
  border-top-color: #DFEEFF;
  border-top-color: rgba(255, 255, 255, 0.5);
}

/*top menu issues*/
.nav-menu-item-357 .sf-with-ul span{
  color:#E81717;
}
.nav-menu-item-357 .main-menu-link.sf-with-ul::after {
  border-top-color:#E81717;
}
/*THIS 3rd LINE DOES NOT WORK:*/
.nav-menu-item-357 .main-menu-link.sf-with-ul:hover:after {
  border-top-color:#E81717;
}

2 个答案:

答案 0 :(得分:0)

Consider the following

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">       
</asp:Content>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.maskedinput.js" type="text/javascript"></script>
<script type="text/javascript">
    jQuery(function ($) {
        $('body').on('click','#cnpjDate',function(){
             $(this).mask("99/99/9999", { placeholder: "dd/mm/yyyy" });
        }); 
        $('body').on('click','#date',function(){
             $(this).mask("99/99/9999", { placeholder: "mm/dd/yyyy" });
        }); 
        $('body').on('click','#phone',function(){
             $(this).mask("(999) 999-9999");
        }); 
        $('body').on('click','#tin',function(){
             $(this).mask("99-9999999");
        }); 
        $('body').on('click','#ssn',function(){
             $(this).mask("999-99-9999");
        }); 
    });
</script>

to add an arrow on that span after test you would do something like the following in css:

<span class="span">test</span>

now to change the color of the arrow on hovering you must do the following

span:after {
    content: '->'
}

working fiddle here

jsfiddle link

答案 1 :(得分:0)

看起来您的代码有效(第3行)。

这是小提琴(我添加了一些类来显示你的菜单元素):http://jsfiddle.net/kost/4k0ebxnz/

.nav-menu-item-357 .main-menu-link.sf-with-ul:hover:after {
    border-top-color:#E81717;
}