Question

我添加了代码以将鼠标悬停在文本上时将其放大，但无法正常工作。谁能看到原因？这是我的jsfiddle.，我认为这并不重要，但实际代码中使用的字体是通过font-face加载的，但我想我应该提一下。

    <style>
    .headerText {transition: all .2s ease-in-out;}
    .headerText:hover {transform: scale(2.1);}
    a.headerText {
       font-family: arial;
       font-weight:bold;
       font-style:none;
       font-size:28px; 
       text-decoration:none;
       text-align:center;  
       color:purple;
       white-space:nowrap;  
       margin-left:20px;
       line-height:1.6;   
    }
    a.headerText:hover {color:green;}
    </style>

    <span class="headerText"><a class="headerText" href="http://example.com">my link</a></span>

Answer 1

Transform属性不适用于嵌入式元素，并且LinearLayout ll_Main = findViewById(R.id.root_lay); //Root Layout in XML File /*Custom Layout*/ LinearLayout root_Layout = new LinearLayout(this); root_Layout.setOrientation(LinearLayout.VERTICAL); LinearLayout.LayoutParams root_Params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.WRAP_CONTENT); root_Layout.setLayoutParams(root_Params); LinearLayout root_Base1 = new LinearLayout(this); root_Base1.setOrientation(LinearLayout.HORIZONTAL); LinearLayout.LayoutParams base_Params1 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.WRAP_CONTENT); base_Params1.setMargins(10,10,10,10); root_Base1.setLayoutParams(base_Params1); root_Base1.setWeightSum(5.0f); CheckBox box1 = new CheckBox(this); box1.setText("A"); LinearLayout.LayoutParams box1_Params = new LinearLayout.LayoutParams(0,LinearLayout.LayoutParams.WRAP_CONTENT); box1_Params.weight = 1; box1.setLayoutParams(box1_Params); CheckBox box2 = new CheckBox(this); box2.setText("B"); LinearLayout.LayoutParams box2_Params = new LinearLayout.LayoutParams(0,LinearLayout.LayoutParams.WRAP_CONTENT); box2_Params.weight = 1; box2.setLayoutParams(box1_Params); CheckBox box3 = new CheckBox(this); box3.setText("C"); LinearLayout.LayoutParams box3_Params = new LinearLayout.LayoutParams(0,LinearLayout.LayoutParams.WRAP_CONTENT); box3_Params.weight = 1; box3.setLayoutParams(box1_Params); CheckBox box4 = new CheckBox(this); box4.setText("D"); LinearLayout.LayoutParams box4_Params = new LinearLayout.LayoutParams(0,LinearLayout.LayoutParams.WRAP_CONTENT); box4_Params.weight = 1; box4.setLayoutParams(box1_Params); CheckBox box5 = new CheckBox(this); box5.setText("E"); LinearLayout.LayoutParams box5_Params = new LinearLayout.LayoutParams(0,LinearLayout.LayoutParams.WRAP_CONTENT); box5_Params.weight = 1; box5.setLayoutParams(box1_Params); root_Base1.addView(box1); root_Base1.addView(box2); root_Base1.addView(box3); root_Base1.addView(box4); root_Base1.addView(box5); root_Layout.addView(root_Base1); LinearLayout root_Base2 = new LinearLayout(this); root_Base2.setOrientation(LinearLayout.HORIZONTAL); LinearLayout.LayoutParams base_Params2 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.WRAP_CONTENT); base_Params2.setMargins(10,10,10,10); root_Base2.setLayoutParams(base_Params2); root_Base2.setWeightSum(5.0f); CheckBox box6 = new CheckBox(this); box6.setText("F"); LinearLayout.LayoutParams box6_Params = new LinearLayout.LayoutParams(0,LinearLayout.LayoutParams.WRAP_CONTENT); box6_Params.weight = 1; box6.setLayoutParams(box6_Params); CheckBox box7 = new CheckBox(this); box7.setText("G"); LinearLayout.LayoutParams box7_Params = new LinearLayout.LayoutParams(0,LinearLayout.LayoutParams.WRAP_CONTENT); box7_Params.weight = 1; box7.setLayoutParams(box7_Params); CheckBox box8 = new CheckBox(this); box8.setText("H"); LinearLayout.LayoutParams box8_Params = new LinearLayout.LayoutParams(0,LinearLayout.LayoutParams.WRAP_CONTENT); box8_Params.weight = 1; box8.setLayoutParams(box8_Params); CheckBox box9 = new CheckBox(this); box9.setText("I"); LinearLayout.LayoutParams box9_Params = new LinearLayout.LayoutParams(0,LinearLayout.LayoutParams.WRAP_CONTENT); box9_Params.weight = 1; box9.setLayoutParams(box9_Params); CheckBox box10 = new CheckBox(this); box10.setText("J"); LinearLayout.LayoutParams box10_Params = new LinearLayout.LayoutParams(0,LinearLayout.LayoutParams.WRAP_CONTENT); box10_Params.weight = 1; box10.setLayoutParams(box10_Params); root_Base2.addView(box6); root_Base2.addView(box7); root_Base2.addView(box8); root_Base2.addView(box9); root_Base2.addView(box10); root_Layout.addView(root_Base2); ll_Main.addView(root_Layout); /*Custom Layout*/是其中之一。

Here，您会看到可以转换的元素列表。

可变形元素是以下类别之一的元素：



其元素布局由CSS框模型控制的元素，该CSS框模型可以是块级或原子内联级元素，或者其display属性可以计算为table-row，table-row-group，table-header -group，table-footer-group，table-cell或table-caption [CSS2]



SVG名称空间中的一个元素，不受CSS盒模型的控制，该CSS盒模型的属性为transform，patternTransform或gradientTransform [SVG11]。

解决方案

将跨度的<span>属性设置为display或inline-block。

block

.headerText {
  display: inline-block;
  transition: all .2s ease-in-out;
}

.headerText:hover {
  transform: scale(2.1);
}

a.headerText {
  font-family: arial;
  font-weight: bold;
  font-style: none;
  font-size: 28px;
  text-decoration: none;
  text-align: center;
  color: purple;
  white-space: nowrap;
  margin-left: 20px;
  line-height: 1.6;
}

a.headerText:hover {
  color: green;
}

过渡不适用于文本

1 个答案:

解决方案