Question

我想要隐藏这些数字，当我在public class Menu2 extends AppCompatActivity { private DrawerLayout mDrawerLayout2; private ActionBarDrawerToggle mToggle; private Toolbar mToolbar; private Button popup; private PopupWindow popupWindow;private LayoutInflater layoutInflater; //Alows to add a new layout in our window @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_menu2); SharedPreferences sharedpreferences = getSharedPreferences("mypref", Context.MODE_PRIVATE); int applyView =sharedpreferences.getInt("currentscore",0); TextView txtScore = (TextView) findViewById(R.id.textScore2); TextView txtHighScore = (TextView)findViewById(R.id.textHighScore); ImageView imgTrophyView1 = (ImageView)findViewById(R.id.trophy1); ImageView imgTrophyView2 = (ImageView) findViewById(R.id.trophy2); Button bttPOPUP =(Button)findViewById(R.id.enablePOPUP); Intent intent = getIntent(); int mScore = intent.getIntExtra ("score",0); txtScore.setText("Your score is: " + mScore); SharedPreferences mypref =getPreferences(MODE_PRIVATE); int highScore = mypref.getInt("highScore", 0); if (highScore>= mScore) txtHighScore.setText("High score: " + highScore); else{ txtHighScore.setText("New highscore: " + mScore); SharedPreferences.Editor editor = mypref.edit(); editor.putInt("highScore",mScore); editor.apply(); } if (applyView >=10) { imgTrophyView1.setVisibility(View.VISIBLE); bttPOPUP.setVisibility(View.VISIBLE); } if (applyView >= 20){ imgTrophyView2.setVisibility(View.VISIBLE); } popup = (Button)findViewById(R.id.enablePOPUP); popup.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { layoutInflater =(LayoutInflater) getApplicationContext().getSystemService(LAYOUT_INFLATER_SERVICE); ViewGroup container = (ViewGroup)layoutInflater.inflate(R.layout.popup_menu2_1,null); popupWindow = new PopupWindow(container,1000,980,true); //400,400=popUp size, true = makes that we can close the pop up by simply click out of the window popupWindow.showAtLocation(mDrawerLayout2, Gravity.CENTER, 0, 0); mDrawerLayout2.setAlpha((float) 0.1); container.setOnTouchListener(new View.OnTouchListener(){ @Override public boolean onTouch(View view, MotionEvent motionEvent ){ mDrawerLayout2.setAlpha((float) 1); popupWindow.dismiss(); return true; } }); popupWindow.setOnDismissListener(new PopupWindow.OnDismissListener() { @Override public void onDismiss() { mDrawerLayout2.setAlpha((float) 1); popupWindow.dismiss(); } }); } }); mToolbar = (Toolbar)findViewById(R.id.nav_action); setSupportActionBar(mToolbar); mDrawerLayout2 = (DrawerLayout) findViewById(R.id.drawerLayout2); mToggle = new ActionBarDrawerToggle(this, mDrawerLayout2, R.string.open, R.string.close); mDrawerLayout2.addDrawerListener(mToggle); mToggle.syncState(); getSupportActionBar().setDisplayHomeAsUpEnabled(true); NavigationView mNavigationView = (NavigationView) findViewById(nv2); mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(MenuItem menuItem){ switch (menuItem.getItemId()){ case(R.id.nav_home2): Intent accountActivity2 = new Intent(getApplicationContext(),QuizActivity.class); startActivity(accountActivity2); } return true; } });} public void onClick(View view) { Intent intent = new Intent(Menu2.this, QuizActivity.class); startActivity(intent); } @Override //Makes that the "Burger" Item, shows the Drawer if someone clicks on the simbol public boolean onOptionsItemSelected(MenuItem item) { if (mToggle.onOptionsItemSelected(item)) { return true; } return super.onOptionsItemSelected(item); }中悬停时，数字将通过使用（转换）显示，但在我的代码中数字不会隐藏

＆＃13;

li

＆＃13;

body {
  background: orange;
}

ul {
  width: 350px;
  margin: 50px auto;
  background: white;
  list-style-type: none;
  padding: 0;
}

li {
  padding: 5px 10px 5px 0;
  font-size: 16px;
}

.n {
  padding: 5px 0px;
  background-color: #ee2222;
  color: white;
  transition: .2s ease-in-out;
}

li:hover .n {
  padding: 5px 10px;
}

＆＃13;

Answer 1

您计划隐藏的方式是错误的加上transition中的CSS结构也是错误的。更正后的代码将使用opacity。请参阅代码中的/* Changed here. */进行更改：

＆＃13;

body {
  background: orange;
}

ul {
  width: 350px;
  margin: 50px auto;
  background: white;
  list-style-type: none;
  padding: 0;
}

li {
  padding: 5px 10px 5px 0;
  font-size: 16px;
}

.n {
  padding: 5px 0px;
  opacity: 0;
  background-color: #ee2222;
  color: #ee2222;                       /* Changed here. */
  transition: all .2s ease-in-out;
}

li:hover .n {
  padding: 5px 10px;
  opacity: 1;                           /* Changed here. */
  color: #fff;                          /* Changed here. */
  margin-right: 5px;                    /* Changed here. */
}

＆＃13;

<ul>
  <li><span class="n">1</span>list item</li>
  <li><span class="n">2</span>list item</li>
  <li><span class="n">3</span>list item</li>
</ul>

＆＃13;

预览

初步观点：

盘旋：

注意：我还为可读性添加了额外的保证金。

Answer 2

您可以像下面那样操纵不透明度。

＆＃13;

body {
  background: orange;
}

ul {
  width: 350px;
  margin: 50px auto;
  background: white;
  list-style-type: none;
  padding: 0;
}

li {
  padding: 5px 10px 5px 0;
  font-size: 16px;
}

.n {
  padding: 5px 0px;
  background-color: #ee2222;
  color: white;
  opacity: 0;
  transition: .2s ease-in-out;
}

li:hover .n {
  padding: 5px 10px;
  opacity: 1;
}

＆＃13;

<ul>
  <li><span class="n">1</span>list item</li>
  <li><span class="n">2</span>list item</li>
  <li><span class="n">3</span>list item</li>
</ul>

＆＃13;

Answer 3

尝试这样的事情。

.n {
visibility :hidden;
padding: 5px 0px;
background-color: #ee2222;
color: white;
transition: .2s ease-in-out;
}

li:hover .n {
visibility:visible;
padding: 5px 10px;
}

正常隐藏元素并使用过渡显示它悬停

3 个答案: